how load function behaviour in jquery

Question

i have html code and jquery to show and hide a form based on image loaded or not loaded like this

...
<title>Untitled Document</title>
</head>
 <script type="text/javascript" src="bootstrap/js/jquery.js"></script>
            <script type="text/javascript">
$(document).ready(function(){

$("#image11")
.load(function(){
    alert('oke1');
    $("#upload1").hide();
    $("#image21").hide();

})
.error(function(){
    alert('oke2');
    $("#image11").hide();
    $("#upload1").hide();
    $("#image21")
        .load(function(){
            alert('oke3');
            $("#upload1").hide();

            $("#image11").hide();
    })
    .error(function(){
        alert('oke4');
            $("#upload1").show();
            $("#image21").hide()
            $("#image11").hide();
      });
   });

})

            </script>
 <body>
     <div class="col-sm-5 col-xs-7">
     <img src="foto_peserta/tes.jpg" width="100"   id="image11"  alt="tes"/>
     <img src="foto_peserta/cek.jpg" width="100" id="image21"  alt="tes2"/>          
  </div>
<div id="upload1">
<form method="post" name="form1" action="<?php echo  $editFormAction; ?>"  enctype="multipart/form-data"><img id="previewHolder"  alt="Foto" width="100px" height="100px"/> <p>
   <input type="file" name="foto_peserta" id="foto_peserta"  required>
   <p class="help-block">maximum image size is 50 kB,only JPG, JPEG, PNG &amp; GIF files are allowed</p>
   <button type="submit" class="btn btn-success">Upload Foto</button>
              <input type="hidden" name="MM_update" value="form1" >
              <input type="hidden"  name="id_personal" value="<?php echo $row_foto_peserta_tampil['id_personal']; ?> ">
    </form></div>


 </body>
 </html>

I just confused why every time i refresh the page (when my image21 is load and my image11 not loaded) the alert ('oke2') prompt but not with alert('oke3'), is anything wrong with my code?

score 1 · Accepted Answer · edited May 23 '17 at 11:58

The load function you are talking about is deprecated since jQuery 1.8:

http://api.jquery.com/load-event/ (see the category of the article)
jQuery or Javascript check if image loaded

In later versions only one .load() function is left into jQuery, to avoid ambiguity, it is used to load data from another source http://api.jquery.com/load/ for example if you need to load text coming from your server into a div in your page.

You can check if an image loaded by using

$('img.mustLoad').on('load',function(){
        /* Fire your image resize code here */
});

This very complicated snippet is taken from the currently second answer of the question i posted above so credit is due to "Alex W". This should work with every version of jQuery

to handle loading errors you need to use a separate event

$('img.mustLoad').on('error',function(){
        /* Fire your image resize code here */
});

So you need to edit your code accordingly

how load function behaviour in jquery

1 Answers1