使用jQuery .load（）回调和图像

Question

当使用jQuerys .load（）方法动态提取内容时，回调函数会在请求完成并且HTML被拉到当前页面时触发。

当新HTML中包含的图片完全加载时，有没有办法计算出来？

谢谢！

Answer 1

据我所知，这不是直截了当的。有些人可能会建议使用.load()事件处理程序，但Jquery文档有一些使用它的注意事项（documentation）：

  

与图像一起使用时加载事件的注意事项

     

开发人员尝试使用.load（）解决的常见问题   快捷方式是在图像（或集合）时执行函数   图像）已完全加载。有几个已知的警告   这应该注意。这些是：

     

  
• 它不能始终如一地工作，也不能可靠地跨浏览器
  
• 如果图像src设置为与之前相同的src，则无法在WebKit中正确触发
  
• 它没有正确地冒泡DOM树
  
• 可以停止触发已存在于浏览器缓存中的图像
  

想到的唯一方法是使用jQuery从返回的HTML中提取img元素，并使用javascript Image对象加载图像。您可以将.onload事件处理程序附加到Image对象。然后，您必须使用诸如延迟对象或甚至简单计数器之类的东西来跟踪它们的加载时间。

这是一个演示，可以在加载所有图像时触发img个对象并使用$.Deferred()个$.when()个对象触发：

http://jsfiddle.net/jtbowden/h4AMG/

在演示中，内容仅在图像加载后加载。您需要将$.load()更改为$.ajax()才能让控件执行此操作。

这是一个使用基本计数器跟踪负载的版本：

http://jsfiddle.net/jtbowden/gnW3f/