快速创建jQuery元素时会触发“就绪"事件吗? [英] Is there a 'ready' event fired when a jQuery element is created on the fly?

问题描述

我正在尝试在jQuery中实现类似照片轮播的功能.该轮播可以使用图像源数组填充图像(我发出一个ajax请求，并使用此数据返回一个json)，填充后，您可以调用一对方法(previous()和next()进行移动)转盘分别向后和向前.

I'm trying to implement something like a photo carousel in jQuery. This carousel could be filled with images using an array of image sources (I make an ajax request that returns a json with this data) and, once is filled, you can call a couple of methods, previous() and next() to move the carousel backward and forward respectively.

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

The thing is that this functionallity is already implemented and working, but I can't solve an issue on resizing process. For avoid that the images exceed the boundaries of the container, I have a method for creating and resizing the images, if needed.

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.

Testing this function, I've found that sometimes, images are not resized as expected. I've used firebug console.log() to log the image[0].width just below jQuery element creation, finding out that sometimes the value is 0.

我不是jQuery专家，但我想发生这种情况(值为0)是因为元素尚未准备就绪.

I'm not an expert on jQuery, but I suppose that when this happens (value is 0) is because the element is not ready.

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

How can I assure that the element is already loaded when I ask for its width and height values?

这样可能吗?

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

谢谢您的帮助！

推荐答案

您要使用>在这种情况下，c0> 事件是这样的:

You want to use the load event in this case, like this:

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

最后一位会触发load事件，以防万一它尚未被触发...在某些浏览器中，使用 .complete 检查是否已加载.

The last bit triggers the load event in case it didn't get triggered already...which doesn't happen in some browsers when loading the image from cache, using .one() to one fire it only once and .complete to check if it's loaded.

这篇关于快速创建jQuery元素时会触发“就绪"事件吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！