0

我有一些代码执行以下操作：

  1. 外部内容通过 AJAX（视频缩略图）加载
  2. 然后使用 $("#content").append(); 将新内容插入到 div 中；
  3. 移动触摸滚动助手 (iScroll) 应用于此 div。

但是，当 DOM 由于 AJAX 事件而发生更改时，jQuery“加载”事件不会触发，这意味着初始化滚动条的调用发生得太快（在内容中的图像加载之前），这意味着它通常不会被初始化. 在不等待图像加载的情况下，内容框通常足够短以至于不需要滚动功能，但是当随后加载图像时，框不可滚动。 

$("#videoList").append(videoThumbnails);

$(document).load(function () {
  // doesn't fire
  initScroller(); 
});

jQuery 的 append 函数似乎不会阻塞，直到附加 HTML 中引用的所有图像都已加载。

如何检测 AJAX 函数加载的所有图像都已完成加载，以便在所有图像加载后调用 initScroller() 函数？

4

2 回答 2

3

好的，我在另一个类似的问题中找到了解决方案。事实证明，有一个 jQuery waitForImages 插件正是我想要的：

所以我可以这样做：

$("#videoList").waitForImages(function () {
    // Fires when all images in the #videoList div have loaded
    initScroller();
});
于 2012-11-12T15:58:01.713 回答
2

您尝试使用的方法仅在页面加载时触发一次，但不会触发您之后对 DOM 所做的更改（例如，使用 ajax 插入内容）。

如果你想观察 DOM 变化，你可以使用 DOMNodeInserted 事件

$(document).bind("DOMNodeInserted", function(event) {   ....do stuff...here     });

但通常最好使用 ajax 回调来触发它。

$('#targetElementForYourContent').load('server/url.html', function() {
     ...do stuff here....
});
于 2012-11-12T15:36:42.787 回答