Question

在jQuery中我将一些html加载到这样的div中：

$("#test").html("Hello <img src='pic.jpg'>");

有没有办法知道html是否已满载？ 我的意思是我设置内容，但图像需要一段时间来加载..我想等到整个HTML加载...

我可以使用$（“img”）。load（...但它不适用于$ .html加载的内容还有其他想法吗？

由于

Answer 1

$("#test").html("Hello <img  class='futureImg' src='pic.jpg'>");

$(".futureImg").live('load',function () { alert('lalala');});

Answer 2

尝试：

$('#test').html("Hello <img src='pic.jpg'>").load(function(){
 // Ur task when it loaded.
});

Answer 3

您可以使用JS Image onload处理程序并在其中添加标记：

$("#btn").click(function(){
    var img = new Image();
    alert('onclick');
    img.onload = function(){
        $("#mycontent").html("<img class='futureImg' src='http://upload.wikimedia.org/wikipedia/commons/6/67/Rita_25_sept_2005_1640Z.jpg'>");
         alert('onload');
    }
    $("#mycontent").html("Image loading...");
    img.src = 'http://upload.wikimedia.org/wikipedia/commons/6/67/Rita_25_sept_2005_1640Z.jpg';
});

http://jsfiddle.net/FPu4P/6/

注意，图像将在第一次打开后缓存。这是一张非常大的图片，因此加载可能需要一两分钟。

修改

并且，您实际上可以同时执行.html()添加和JS缓存（据我所知）：

$("#btn").click(function(){ // Just so the image is not cached var r = Math.floor(Math.random()*1111111111); var url = 'http://upload.wikimedia.org/wikipedia/commons/6/67/Rita_25_sept_2005_1640Z.jpg?'+r; var img = new Image(); alert('onclick'); img.onload = function(){ alert('onload'); } $("#mycontent").html("<img class='futureImg' src='"+url+"'>"); img.src = url; });

http://jsfiddle.net/FPu4P/7/

Answer 4

诀窍是在将<img>瞄准文件之前设置事件监听器：

$("#test").html ("Hello <img />");
var newImg = $("#test > img");

newImg.load( function () {
    alert ('Success!');
} ).attr ('src', 'pic.jpg');

See it in action at jsFiddle.

Answer 5

$("#test").load(function() {
    //your code after #test loaded
});

Answer 6

为什么你不使用.ready()？

文档：http://api.jquery.com/ready/

Answer 7

$("#test").html('Hello <img src="pic.jpg">').find('img').load(...)

Answer 8

此页面上尚未提及的另一个解决方案是使用jQuery的延迟对象，如下所示：

var rq_html = $.get('.../somepage.html');
var rq_img = $.get('.../img/someimg.jpg');

$.when(rq_html, rq_img).then(function() 
{
  // both requests completed, append received html into DOM
  // and either rely on cache or insert img manually
}, function()
{
  // this function is failure handler in case one of the requests fails
  // the other request may still be pending at this point,
  // you might want to cancel it or handle the situation in another way...
});

等等jQuery.html（）完全加载？

8 个答案: