3

我面临的问题是，在将 div 中的一堆图像（每个 div 一个）附加到容器（div）之后，我没有得到 onload 函数。

这是在一个循环中，包括一堆变量

$('#container').append('<div class="tile" style="position:absolute; top:'+(i*size)+'px; left:'+(j*size)+'px; width:'+size+'px; height:'+size+'px; overflow:hidden;" ><img src="'+map[i][j]+'"/></div>');

所有变量都很好，所有图像都正确加载，但这永远不会起作用

$('.tile img').live('load', function(){
console.log("loaded");
});

或者

$('.tile img').on('load', function(event){
console.log("loaded");
});

我已经尝试过使用较新的 .on jQuery 函数，但不行..

编辑：[+]添加了 .on 代码（两个函数都放在文档准备好后的右上角）

4

2 回答 2

10

更新：我玩了一下，以下策略也适用于新创建的图像上的加载事件。首先，我创建图像，然后将其附加到 div 中，然后再将其附加到文档中。

http://jsfiddle.net/lucuma/sHGm9/1/

$('.slideshow').each(function(i) {

    var $img = $('<img src="..." />').on('load', function(){
        alert('loaded');
    });

    $(this).append( $('<div class="tile" style="" ></div>').append($img) );               
    // you'd need to just use your div example here

});

原答案：

我可以想到两件事。在附加之前添加 on/live 或将其更改为以下内容：

var $img = $('<img src="..." />');

$img.on('load', function() {
    alert('loaded');
});

$('#slideshow').append($img);  // adapted for my example

http://jsfiddle.net/lucuma/sHGm9/

于 2012-05-29T23:09:25.240 回答
2

我知道这是一篇旧帖子，但我最近不得不处理这个确切的问题，并找到了一个稍微简单的解决方案：

$(".container").append(yourImageOrImages);
setImages();

function setImages() {
    $(".container img").each(function() {
        $(this).on('load', function(){
            // Your code to run when done loading
        });
    });
}
于 2018-04-19T06:34:57.187 回答