1

当使用 jQuery 的 .load() 方法动态拉入内容时，回调函数会在请求完成并且 HTML 被拉入当前页面时触发。

当新 HTML 中包含的图像完全加载时，有没有办法解决？

谢谢！

4

1 回答 1

4

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

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

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

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

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

这是一个演示，它会在加载所有图像时拉出img对象并使用$.Deferred()带有 a 的对象$.when()来触发：

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

在演示中，内容仅在图像加载后才会加载。您将需要更改$.load()为$.ajax()拥有执行此操作的控制权。

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

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

于 2012-04-30T23:25:55.550 回答