使用jQuery .load()回调和图像

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

当新HTML中包含的图像完全加载时,有没有办法解决问题?

谢谢!

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

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

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

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

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

这是一个演示了拉出img对象并使用带有$.Deferred()对象在所有图像加载时触发:

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

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

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

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