Question

我正在尝试在jQuery中实现类似照片轮播的功能。这个轮播可以使用图像源数组填充图像（我发出一个ajax请求，返回带有此数据的json），一旦填充，你可以调用几个方法，previous（）和next（）来移动旋转木马分别向后和向前。

问题是这个功能已经实现并且正常工作，但我无法解决调整大小过程的问题。为了避免图像超出容器的边界，我有一种方法可以根据需要创建和调整图像大小。

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!
});

感谢您的帮助！

Answer 1

您希望在这种情况下使用load事件，如下所示：

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

最后一位会触发load事件，以防它没有被触发......当从缓存中加载图像时，某些浏览器不会发生这种情况，使用.one()进行一次火灾它只需要一次.complete来检查它是否已加载。

Answer 2

没有平台兼容的方法来查看DOM对象是否“准备就绪”，请参阅https://developer.mozilla.org/en/DOM_Events了解gecko特定事件

Answer 3

根据提供的答案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>

在动态创建jQuery元素时是否触发了'ready'事件？

3 个答案: