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

Question

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

但是，在有许多图像要加载的页面上，缩略图出现之前可能需要相当长的时间。

我曾考虑过使用某种延迟加载技术，但我认为将加载动画的触发器从整个页面的加载完成切换为仅完成每个页面的加载可能会更简单特定图像。我已经使用以下脚本对此进行了尝试:

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

不过，它似乎并没有起作用。谁能帮帮我？

谢谢!

Answer 1

来自 jQuery 文档 @ http://api.jquery.com/load-event/ :

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

为图片本身绑定(bind)加载事件，并从回调函数中找到对应的加载文本。

$(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 已加载后，您还必须确保在就绪函数中绑定(bind)加载事件。内联脚本元素在解析后立即执行。

编辑:正如上面的 jQuery 文档中提到的，有几个警告使它在某些浏览器中变得不可靠，有时这个事件不会对已经在缓存中的图像触发，而在 webkit 上它如果将图像 src 更改为与以前相同的值，则不会触发。在这个论坛帖子中有一个有趣的观点:http://forum.jquery.com/topic/image-load-event-some-progress

我编辑了上面的代码以添加一些变通方法，但不能保证它能正常工作。