Javascript 等待动态子映像完成加载_Javascript_Jquery

Javascript 等待动态子映像完成加载

javascript jquery

Javascript 等待动态子映像完成加载,javascript,jquery,Javascript,Jquery,假设我有这样的情况： $(window).load(function() { $("body").append("<div id='container'></div>"); var i=1; for ( i=1; i<=10; i++ ) { $("#container").append("<img src='img"+i+".jpg'></img>"); } }); $（窗口）.l

假设我有这样的情况：

$(window).load(function() {

    $("body").append("<div id='container'></div>");
    var i=1;
    for ( i=1; i<=10; i++ ) {
            $("#container").append("<img src='img"+i+".jpg'></img>");
    }
});

$（窗口）.load（函数（）{
$（“正文”）。追加（“”）；
var i=1；
对于（i=1；i您也可以使用jQuery创建这些图像，并为这些图像附加一个onload
-eventhandler。此外，您还可以将其与jQuery的延迟对象相结合，将它们链接在一起。这可能类似于：
$(document).ready(function() {
    $("body").append("<div id='container'></div>");
    var i      = 1,
        images = [ ],
        $img   = null;

    for ( i=1; i<=10; i++ ) {
        $img = $('<img>', {
            load: function() {
                images.push( $.Deferred(function( promise ) {
                    promise.resolve();
                }).promise() );
            }
        }).appendTo( '#container' );

        $img.attr('src', 'img' + i + '.jpg');
    }

    $.when.apply( null, images ).done( function() {
        // all images were loaded here, do whatever you want.
    });
});

$（文档）.ready（函数（）{
$（“正文”）。追加（“”）；
var i=1，
图像=[]，
$img=null；
对于（i=1；i您也可以使用jQuery创建这些图像，并为这些图像附加一个onload
-eventhandler。此外，您还可以将其与jQuery的延迟对象相结合，将它们链接在一起。这可能类似于：
$(document).ready(function() {
    $("body").append("<div id='container'></div>");
    var i      = 1,
        images = [ ],
        $img   = null;

    for ( i=1; i<=10; i++ ) {
        $img = $('<img>', {
            load: function() {
                images.push( $.Deferred(function( promise ) {
                    promise.resolve();
                }).promise() );
            }
        }).appendTo( '#container' );

        $img.attr('src', 'img' + i + '.jpg');
    }

    $.when.apply( null, images ).done( function() {
        // all images were loaded here, do whatever you want.
    });
});

$（文档）.ready（函数（）{
$（“正文”）。追加（“”）；
var i=1，
图像=[]，
$img=null；
对于（i=1；i，由于您使用JS加载图像，所以要知道它们何时全部加载，唯一的方法是使用加载事件处理程序监视每个图像。因此，考虑到这一点，我认为您的相反想法听起来是最简单的方法
如果在页面源中加载图像，则可以使用页面的onload处理程序，因为这将等待所有图像加载完成
我唯一能想到的另一个简单的可能性是，通过将图像作为图像标记放在实际页面中来预加载图像。如果您不希望它们显示在该位置，则可以将其隐藏。然后，在执行页面onload处理程序之前，浏览器将加载这些图像，它们将准备好让您检查它们的大小，然后p查找新的图像标记（在页面的其他位置使用相同的URL）。因为浏览器已经加载了它们，新标签将从缓存中加载，因此没有真正的速度问题。
因为您使用JS加载图像，所以知道它们何时全部加载的唯一方法是使用加载事件处理程序监视每一个图像。因此，考虑到这一点，我认为您的反对意见听起来很简单这条路不远
如果在页面源中加载图像，则可以使用页面的onload处理程序，因为这将等待所有图像加载完成
我唯一能想到的另一个简单的可能性是，通过将图像作为图像标记放在实际页面中来预加载图像。如果您不希望它们显示在该位置，则可以将其隐藏。然后，在执行页面onload处理程序之前，浏览器将加载这些图像，它们将准备好让您检查它们的大小，然后p查找新的图像标记（在页面的其他位置使用相同的URL）。由于浏览器已经加载了这些标签，新标签将从缓存中加载，因此没有真正的速度问题。
我会支持你的破解，因为无论哪种方式，你都必须保持计数。我会支持你的破解，因为无论哪种方式，你都必须保持计数。我想知道你是否一定能指望jQuery连接到当您同时提供src
属性时，在设置src
属性之前加载handler？因为如果没有，您有一个竞争条件：如果jQuery在设置load
之前设置src
，并且图像在缓存中，浏览器可能会在jQuery设置eload
handler.（JavaScript是单线程的；浏览器不是。浏览器可以随时触发事件，它的处理程序会排队——但如果它们还没有被设置的话就不会。）当然，我会先显式地钩住load
。@TJCrowder：你说的“先显式钩住它”是什么意思？在对象文本中？正如你所知道的，对象文本中有保证的顺序，所以这不会有任何区别。但我想我在这里搞错了。@jAndy:不，文本中的属性是完全无序的。我会将src
完全排除在文本之外，然后返回并在img
e之后设置它元素已经创建。这是唯一可以确定的方法。我应该说，我不是在假设；我已经在过去的实验中证明了这一点（使用原始JavaScript）如果您在一行上设置src
，并在下一行挂起load
，则在某些浏览器中，如果图像在缓存中，您可能会错过事件。如果您先挂起它，然后设置src
@jAndy:“我非常信任jQuery核心编码器在创建元素时在任何处理程序之前设置src属性"另一种方法是。你必须先连接处理程序，然后设置src
。只要看看jQuery源代码，我就看不到任何东西可以保证它首先钩住处理程序。我可能会错过它，但更重要的是，它不能保证它。如果它不在文档中，就不要依赖它。之后设置src
sn不需要花费任何费用，并且可以避免一个讨厌的间歇性错误。如果使用计数器是一种复杂的方式，那么与一个简单的计数器相比，这种实现有什么好处呢？我想知道，当您同时提供src
属性时，您是否一定希望jQuery在设置load
处理程序之前连接处理程序这是因为如果不是，您有一个竞争条件：如果jQuery在设置load
之前设置了src
，并且图像在缓存中，那么浏览器可能会在jQuery设置load
处理程序之前立即触发load
事件。（JavaScript是单线程的；浏览器不是。浏览器可以随时触发事件，它的处理程序会排队——但如果它们还没有被设置的话就不会。）当然，我会先显式地钩住load
。@TJCrowder：你说的“先显式钩住它”是什么意思？在对象文字中？正如你所知道的，对象文字中有保证的顺序，所以这不会有任何区别。但我想我在这里误解了你。@jAndy:不，文字中的属性