Displaying default image on page load if actual image is not retrieved

Question

Hello All,
In jsff i have something like below
<af:image source="path/something.jpg" id="id_1" styleClass="displayingImage">
but if the image is not present in the path then a red cross is displayed.
Is there any way where i can display a default image on page load if image is not properly loaded.

Answer 1

Approach 1
If i bind "source" property to back bean and check it will work.
But because of the complexity of project, it is not possible to go with this approach.
Approach 2 (I am selecting this approach)
(Working fine)
When i click on image, the image is set to as default image
<af:resource type="javascript">
var changeImage = function (event) {
    $('.cssclass').each(function(){
        var image = $(this);
        $(image).hover(function(){ 
                $(image).attr('src','/path/defaultImage.png');
</af:resource>
<af:image source="http://#{facesContext.externalContext.request.serverName}:#{facesContext.externalContext.request.serverPort}/file/#{pageFlowScope.bean.imageName}&amp;Rendition=164FixedWidth" id="id_1" styleClass="cssclass"
              rendered="#{!empty pageFlowScope.bean.imageName}">
     <af:clientListener method="changeImage" type="click" />
</af:image>
(Not Working fine)
On page load
<af:resource type="javascript">
$(document).ready(function(){                        //on page load
      alert("Check");                                         //alert is displayed correctly
      $('.cssclass').each(function(){                         //search for all image with name "cssclass"
          var image = $(this);
          $(image).load(function(){}).error(function(){       //JQuery experts, can you please tell me if this line works in ADF
              $(image).attr('src','/path/defaultImage.png');
</af:resource>
<af:image source="http://#{facesContext.externalContext.request.serverName}:#{facesContext.externalContext.request.serverPort}/file/#{pageFlowScope.bean.imageName}&amp;Rendition=164FixedWidth" id="id_1" styleClass="cssclass"
              rendered="#{!empty pageFlowScope.bean.imageName}">
</af:image>
<af:image source="http://#{facesContext.externalContext.request.serverName}:#{facesContext.externalContext.request.serverPort}/file/#{pageFlowScope.bean.imageName}&amp;Rendition=164FixedWidth" id="id_2" styleClass="cssclass"
              rendered="#{!empty pageFloScope.bean.imageName}">
</af:image>