javascript - img onload 函数有时未定义

Question

加载我的页面时，有时，我的 <img onload="" 调用的函数事件返回时未定义，图像无法显示。有没有不同的方法我应该调用该函数以确保在加载 img 并调用它之前定义该函数？我还缺少其他东西吗？

<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>

错误:

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

Answer 1

使用 JQuery 将为您解决所有问题。您还必须遍历每个类，或者简单地使用 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>