jquery - 动态创建 jQuery 元素时是否会触发 'ready' 事件？

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 元素创建下方的 image[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检查它是否已加载。