CODEWITHSUNDEEP
javascriptjqueryhtml
ryeMoss
ryeMoss

Reputation: 4343

img onload function sometimes not defined

When loading my page, on occasion, the function called by my <img onload="" events come back as not defined and the images fail to display. Is there a different way I should be calling the function to ensure that the function is defined before the img is loaded and calls it? Is there something else I am missing here?

<div class="gallery">
  <img onload="fader(this)" src="images/photos/image1.jpg" class="galleryimage">
  <img onload="fader(this)" src="images/photos/image2.jpg" class="galleryimage">
  <img onload="fader(this)" src="images/photos/image3.jpg" class="galleryimage">
  <img onload="fader(this)" src="images/photos/image4.jpg" class="galleryimage">
</div>

<script>
  function fader(obj) {
    $(document).ready(function () {
        $(obj).fadeIn(1000);
    });
  }
</script>

The error:

photos.html:30 Uncaught ReferenceError: fader is not defined
    at HTMLImageElement.onload (photos.html:30)

Upvotes: 1

Views: 2721

Answers (2)

Luicy
Luicy

Reputation: 33

Using JQuery will fix it all for you. You must loop through every class as well or simply use img[class='galleryimage'].

$(".gallery").ready(function(){
  $(".galleryimage").each(function(){
    $(this).fadeIn("slow");
  });
});
.galleryimage {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="gallery">
  <img src="images/photos/image1.jpg" class="galleryimage">
  <img src="images/photos/image2.jpg" class="galleryimage">
  <img src="images/photos/image3.jpg" class="galleryimage">
  <img src="images/photos/image4.jpg" class="galleryimage">
</div>

Upvotes: 1

Yohann V.
Yohann V.

Reputation: 56

Why not do all your stuff with jquery?

$(".galleryimage").on("load", function(){
    $(this).fadeIn(1000);
});

Upvotes: 1

Related Questions