Question

我继承了一个加载页面的项目，然后附加到该页面的代码用动态生成的html填充div - 它基本上用html字符串填充现有的div。

此字符串包含图像链接等。

我想知道所有图片等都已加载 - 我似乎无法获得任何jQuery标准检查工作 - 即我已经尝试在插入动态内容后附加$(window).load()。

我想知道我是否应该动态编写$(window).load()，或者是否还有其他内容方法 - 即$("#thediv").load（似乎无法工作。我无法查询所有新的html图像标签，等等 - 太多的东西被投入。

Answer 1

$(window).ready()仅适用于HTML文件中的内容，您只能使用load将onload事件处理程序附加到特定图像（而不是容器），这样的事情可能适合您。

window.ImageLoadHandled = false;
window.ImageLoadCount = 0;

function ImageLoadHandler() { 
    // guard against calling this function twice
    if(window.ImageLoadHandled) return;
    window.ImageLoadHandled = true;

    // All images have loaded || timeout expired...
}

$("#myAjaxedDiv img").load( function() {
    window.ImageLoadCount++;
    if( window.ImageLoadCount == $("#myAjaxedDiv img").length ) {
        // all images in #myAjaxedDiv have loaded
        ImageLoadHandler();
    }
});

// if images haven't loaded after 5 seconds, call the code
setTimeout( ImageLoadHandler, 5000 )

唯一的问题是，如果图像由于某种原因无法加载，代码将永远不会被命中，这是非常危险的。为了抵消这一点，我建议创建一个setTimeout()方法，在几秒钟超时后调用您的代码，以防加载图片（客户端或服务器端）时出现问题，我也会采取@ TrueBlueAussie在编辑中进行了更正。

您的选择是preload the images with your HTML page

Answer 2

据我所知，$（window）.load（）对动态内容不起作用。您可以为分隔的每个图像使用.load事件。这是一个例子：

var container = $("<div> ... Stuff ... </div>");
var images = container.find('img');
var imageIdx = 0;
images.load(function(){
    imageIdx++;
    if (imageIdx == images.length){
        callback();
    }
});

其中callback（）是在加载的所有图像之后运行的函数。

Answer 3

从我的评论中：window load仅适用于初始页面加载。不动态加载其中的内容。将load处理程序附加到每个已加载的图像元素并对其进行计数。

这是我能为你提出的最短版本：

// After HTML load finishes
var img = 0;
var imgCount = $("#thediv img").load(function(){
    if (++img == imgCount){
        // We are done loading all images!
    }
}).length;

div在主页加载后用html动态填充 - 如何确定它已被加载

3 个答案: