Question

我目前正在使用jQuery来操作加载占位符图像，该图像涵盖了在我的网站上加载缩略图。基本上，脚本等待页面完成加载，然后隐藏加载动画。您可以在我的网站上看到效果here。

在要加载许多图像的页面上，缩略图出现之前可能需要一段时间。

我曾考虑使用某种延迟加载技术，但我认为只需将加载动画的触发器从整个页面的加载完成切换到每个加载完成就可能更简单特别的形象。我用以下脚本给出了一个镜头：

<script type="text/javascript"> $('div[id^="photo"]').load(function() { $(this+"_loading").fadeOut('slow'); }); </script>

但是，它似乎没有起作用。任何人都可以帮助我吗？

谢谢！

Answer 1

来自jQuery docs @ http://api.jquery.com/load-event/：

“此事件可以发送到与URL关联的任何元素：图像，脚本，框架，iframe和窗口对象。”

将事件绑定到图像本身，并从回调函数中找到相应的加载文本。

$(function(){
   $('div[id^="photo"] img').load(function(){
      $(this).closest('div').find('.loading').fadeOut("slow");
   });

   $('div[id^="photo"] img').each(function(){
      var src = $(this).attr('src');
      $(this).attr('src','#');
      $(this).attr('src',src);
   });
});

上面的代码允许对标记进行细微的重新排列。

在DOM准备好并加载jQuery之后，您还必须确保在ready函数中绑定load事件。内联脚本元素在解析后立即执行。

编辑：正如上面的jQuery文档中所提到的，有几点需要注意，在某些浏览器中这种情况不可靠，有时这个事件不会触发已经在缓存中的图像，在webkit上也是如此如果您将图像src更改为与以前相同的值，则不会触发。关于它的论坛帖子中有一个有趣的观点：http://forum.jquery.com/topic/image-load-event-some-progress

我编辑了上面的代码，添加了一些解决方法，但不保证可以正常工作。

jQuery - 在每个单独的图像上完成加载动画？

1 个答案: