在运行中创建jQuery元素时是否触发了“就绪”事件？

我正试图在jQuery中实现类似于照片轮播的内容。这个轮播可以使用一系列图像来源填充图像（我发出一个ajax请求，返回带有这些数据的json），一旦填充完成，您可以调用几个方法，previous（）和next（）来移动传送带分别向后和向前。在运行中创建jQuery元素时是否触发了“就绪”事件？

事情是这个功能已经实现并正在工作，但我不能解决调整过程中的一个问题。为了避免图像超出容器边界，我有一个方法来创建和调整图像的大小，如果需要的话。

this.getImageResized = function(imageSrc) { 

    var image = $('<img />', {src : imageSrc}); 

    // Container ratio 
    var ratio = this.itemMaxWidth/this.itemMaxHeight; 

    // Target image ratio is WIDER than container ratio 
    if((image[0].width/image[0].height) > ratio) { 
     if(image[0].width > this.itemMaxWidth) { 
      image.css('width', this.itemMaxWidth + 'px'); 
      image.css('height', 'auto'); 
     } 
    // HIGHER 
    } else { 
     if(image[0].height > this.itemMaxHeight) { 
      image.css('width', 'auto'); 
      image.css('height', this.itemMaxHeight + 'px'); 
     } 
    } 

    // Embeds image into a wrapper with item's width and height 
    var wrapper = $('<span style="display : block; float : left; width : ' + this.itemMaxWidth + 'px; height : ' + this.itemMaxHeight + 'px"></span>'); 

    image.appendTo(wrapper); 

    return wrapper; 
};

测试此功能，我发现有时，图像没有按预期调整大小。我已经使用firebug console.log（）在jQuery元素创建之下记录图像[0] .width，发现有时值为0.

我不是jQuery的专家，但我想当发生这种情况（值为0）是因为元素没有准备好。

如何确保当我询问其宽度和高度值时，元素已经加载？

是这样的可能吗？

var image = $('<img />', {src : imageSrc}).ready(function() { 
    // But image[0].width it's not available here! 
});

谢谢你的帮忙！

来源

2010-06-22 Roberto Adarve

可能重复的[图片加载jQuery事件]（http://stackoverflow.com/questions/910727/jquery-event-for-images-loaded） – spender 2010-06-22 21:42:14

@spender - 请参阅我对Sarfraz的答案的评论...这不是'同样的问题，这也不是合适的答案，这不应该作为一个重复被关闭......因为，瓦特呃，这是一个不同的问题。 – 2010-06-22 21:50:44

@Nick，我只能认为你没有发现Sarfaz正在使用窗口加载事件，但链接问题中的答案使用图像加载事件。我会发布一个答案来演示，但它确实不是必要的。 – spender 2010-06-22 22:51:02

你想在这种情况下使用load事件，像这样：

var image = $('<img />', {src : imageSrc}).one('load', function() { 
    // use this.width, etc 
}).each(function() { 
    if(this.complete) $(this).load(); 
});

最后一位会触发该事件load它并没有得到已经触发...这不发生一些浏览器在从缓存中加载图像时，使用.one()来一次只触发一次，并且.complete检查它是否被加载。

来源

2010-06-22 21:39:19

非常感谢你尼克！这工作得很好！ – 2010-06-23 08:10:04

没有'one'方法，你应该将其改为'on' – kirugan 2013-07-22 12:53:05

@kirugan是的：http://api.jquery.com/one/它不是拼写错误。 – 2013-07-22 13:14:44

毫无平台兼容的方式，看是否有DOM对象是“准备好了”，看到https://developer.mozilla.org/en/DOM_Events对壁虎特定事件

来源

2010-06-22 21:41:26 azatoth

按规定here答案，我敲在一起工作演示：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script> 
    <script type="text/javascript"> 
    //<![CDATA[ 
    $(window).load(function(){ 
    //window load already fired 
    setTimeout(function(){ 
     var img=$('<img />'); 
     img.appendTo($("body")); 
     img.load(function(){alert("img is "+$(this).width()+"px wide.")}); 
    },5000) //5 secs delay. definitely adding "dinamically" 
     img.attr("src","http://sstatic.net/so/img/sprites.png"); 
    }); 
    //]]> 
    </script> 
</head> 
<body> 

</body> 
</html>

来源

2010-06-22 22:52:59 spender

这里有几件事要解决，这不处理缓存的情况（它不会在所有浏览器中触发'load'，请参阅我的答案），它应该是'img.appendTo（“body”），'和你应该在设置源代码之前附加'load'处理程序，否则它绝对不会在* any *浏览器中从缓存中激发你的装载处理程序，事件可能在它有一个处理程序之前触发。 – 2010-06-22 23:27:36

修正了命令...我会为其余的部分重新实现您的答案！ ;） – spender 2010-06-22 23:45:33

在运行中创建jQuery元素时是否触发了“就绪”事件？

回答

相关问题