Javascript 加载主页后,div将动态填充html-如何确定已加载

Javascript 加载主页后,div将动态填充html-如何确定已加载,javascript,jquery,html,loading,Javascript,Jquery,Html,Loading,我继承了一个项目,其中加载了一个页面,然后附加到该页面的代码用动态生成的html填充一个div——它基本上用html字符串填充一个现有div 此字符串包含指向图像等的链接 我想告诉大家什么时候所有的图片等都加载了-我似乎无法得到任何jQuery标准检查 工作-即我已尝试在插入动态内容后附加$window.load 我想知道我是否也应该动态地编写$window.load,或者是否还有其他方法 方法-ie$thediv.load似乎不起作用。我无法查询所有新html的图像标记等- 正在放入的内容太多

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

此字符串包含指向图像等的链接

我想告诉大家什么时候所有的图片等都加载了-我似乎无法得到任何jQuery标准检查 工作-即我已尝试在插入动态内容后附加$window.load

我想知道我是否也应该动态地编写$window.load,或者是否还有其他方法 方法-ie$thediv.load似乎不起作用。我无法查询所有新html的图像标记等- 正在放入的内容太多。

$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的更正


据我所知,

您可以选择$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是在加载的所有图像之后运行的函数。

来自我的注释:窗口加载仅适用于初始页面加载。而不是动态加载其中的内容。将加载处理程序附加到每个加载的图像元素,并对它们进行计数

这是我能为您提供的最短版本:

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

窗荷载仅适用于初始荷载。不是动态加载。有各种各样的技巧可以将加载处理程序附加到每个加载的图像元素并对它们进行计数,只需几行jQuery代码,Google搜索应该可以很快找到这些代码。我认为我们需要更多的上下文。什么情况或问题要求您知道该DIV已加载,您所说的加载是什么意思?您是否尝试在填充该DIV的代码末尾生成回调函数?由于DOM结构未知,因此子级是一个错误的选择。您还应该缓存find中的长度。@TrueBlueAussie-完全同意.children,没有测试代码:p.find或$myAjaxedDiv img是更好的选择,因为它将事件附加到所有子级,而不管深度如何。如果是硬编码的,缓存图像数量可能会导致问题,如果动态加载更多图像,则可能会导致问题,尽管在这种情况下,此代码无法保证正常工作。加载div后,图像数量不会发生变化,因此提前保存计数比每次加载后对所有图像进行计数要好。基于此,我做了一个简短的回答。你怎么知道的?