时间戳

首页 > 解决方案 > 在 JQuery 3.X 中完成加载后，如何在具有类的所有图像上触发函数？

javascript - 在 JQuery 3.X 中完成加载后，如何在具有类的所有图像上触发函数？

问题描述

我有一个需要加载大量图像的网页。我想在图像加载时显示一个带有加载 gif 的 div，但我想在图像加载完成后淡出该 div。当我在互联网上搜索时，我发现了“.load”功能，但这不适用于图像。“.on('load', function(){...})” 也不起作用。

这是我尝试过的，但不起作用。

<a data-fancybox="gallery" href="image1.jpg">

  <img src="thumbs/image1.jpg" class="slideshow_image"/>
  
  <div class="loading">
    <div class="loading_image">
      <img src="loading.gif"/>
    </div>
  </div>
  
</a>

<a data-fancybox="gallery" href="image2.jpg">

  <img src="thumbs/image2.jpg" class="slideshow_image"/>
  
  <div class="loading">
    <div class="loading_image">
      <img src="loading.gif"/>
    </div>
  </div>
  
</a>

<a data-fancybox="gallery" href="image3.jpg">

  <img src="thumbs/image3.jpg" class="slideshow_image"/>
  
  <div class="loading">
    <div class="loading_image">
      <img src="loading.gif"/>
    </div>
  </div>
  
</a>

<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
<script>
    $(".slideshow_image").on("load", function() {
      $(this).next().fadeOut("slow");
    });
</script>

标签： javascriptjqueryhtml

解决方案

这实际上工作正常。

https://codepen.io/tmdesign/pen/NWqqXwy

您所经历的可能与您正在使用的画廊库发生冲突。他们经常在 HTML 中复制图像以实现其效果。我建议查看检查器中的最终输出，看看.next()逻辑是否仍然成立。

但是，要回答您的问题，如果您删除该画廊，就像我在上面的链接中所做的那样，您会看到“加载”图像淡出（在示例中，所有 6 个图像--3 个显示图像，3 个加载图像--是一样的，但你仍然可以看到效果）。

<script>
    $(".slideshow_image").on("load", function() {
      $(this).next().fadeOut("slow");
    });
</script>

推荐阅读