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>

Answer 2

为什么不用jquery做所有的事情？

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

img onload函数有时未定义

2 个答案: