刚刚添加的jQuery访问DOM

Question

我正在使用jQuery将图像添加到另一个DOM元素。现在我不想淡出添加的图像，但它不会很好，我猜是因为图像是在文档加载后添加的！？

这里是我的代码

$('#t' + u).html('<img style="top: 100px;" src="'+data[dataRnd].img+'"/>').find('img').fadeOut(5000); 

Answer 1

而不是使用html()的，首先创建img作为一个jQuery DOM对象。之后，您可以将其附加到容器并淡出。

var $img = $('<img style="top: 100px;" src="'+data[dataRnd].img+'"/>'); 
var $container = $('#t' + u).empty(); 

$img.appendTo($container).fadeOut(5000); 

• jsFiddle Demo
• .appendTo()
• 我以前.empty()效仿的.html()
• Creating DOM elements from an HTML string with $()

---

问题的 “清洗” 作用会因为动画可能在图像加载之前启动。正如@adaneo正确建议的那样，.load()方法可用于在加载图像时添加事件处理程序，并启动动画。这仍然有一些cross-browser issues (see Caveats)，但如果load事件没有触发，您可以在几秒钟内开始动画。

$img.on('load', function() { 
    $(this).fadeOut(5000); 
}).appendTo($container); 

setTimeout(function() { 
    $img.trigger('load'); 
}, 2000); 

jsFiddle Demo

Answer 2

bazmegakapa的答案是相当不错的，我用的是自己去了，但这里是另一种方式：

一旦文档已被加载（并连接到该事件的脚本有之前添加的任何HTML都不提供给脚本。

那么还有其他两种方式我所知道的选择尚不存在的元素：

你可以使用.on()到处理程序绑定到不存在的元素。这不是我知道有很多关于但是这可能帮助： http://api.jquery.com/on/

另一种方式是等待，直到你的处理程序绑定到它之前添加HTML - 例如：

$(function(){ 
    //i run when the doc loads 
    $.get('someurl', function(data){ 
     $('body').append('<img src="'+data+'" id='myNewElem'/>'); 
     //I run after the element is added to the DOM, so I can select it here 
     $('img#myNewElem').fadeOut(); 
    }); 
}); 

再次我会去与以前的答案个人，这些只是你可以完成同样的事情的其他方式。

编辑：

第三种选择就是有点更适合您的是一个负载（）事件附加到您添加到页面的图像，并淡出出来，一旦图像完成加载。

例子：

$('#elem').html('<img src="someSrc" id="myImage">'); 
$('#myImage').load(function(){ 
    $(this).fadeOut(); 
}); 

这将防止褪色发生之前的图像是在网页上可见。

希望这有助于

Answer 3

你做它应该工作得很好的方式，但应该有图片的加载检查，是这样的：

$('#t' + u) 
    .html('<img style="top: 100px;" src="'+data[dataRnd].img+'"/>') 
    .children().load(function() { 
     $(this).fadeOut(5000); 
    }); 

FIDDLE