Question

可能重复：
Official way to ask jQuery wait for all images to load before executing something

我正在编写一个jQuery插件，通过对插件函数的简单调用（类似于$("#image1").anims()，其中#image1是一个图像）来处理一堆图像动画，但是作为插件的一部分功能我使用$(this).width()在函数调用开始时获取图像的宽度。

但是，由于插件函数在$(document).ready中调用，它试图在图像加载之前获取图像的宽度，因此它总是返回0.是否有解决方法？

Answer 1

http://docs.jquery.com/Events/load

$("#image1").load(function () {
$("#image1").anims();
});

Answer 2

您可以预加载图片

var oImage = new Image();

oImage.onload = function(){
    this.width// width of loaded image
}

oImage.src = '/path/to/image.gif';

$（document）.ready不会等待图片加载，等待dom准备就绪。

Answer 3

如果您使用jQuery.append（）或jQuery.html（）将可信赖的html插入“element1”并且您的css值为element2，则div或span会向左浮动以适合element3，您将无法获得offsetWidth ，element3的clientWidth，naturalWidth（google crome），没有新的事件触发器。

var element1 = $('div.container');
while(i<=length){
var element2 = $('<span/>').attr({'id':''+[i]+'','class':'container'});
var element3 = $('<img/>').attr('src':''+source[i]+'','class':'img');
$(element1)children().remove();
$(element2).appendTo(element1).append(element3);
var elms = $(element3);
var chwidth = elms[i].offsetWidth // returns 0;
++i;
};

您可以做的是在元素加载之前返回元素的上下文宽度。

while(i<=length){
$(element1).children().remove();
$(elemen2).appendTo(element1).append(element3);
var elms = $(element3);
var newelms = elms[i].load();
var chwidth = newelms[i]['context'].width // returns element3's contextual width
if(chwidth != 0) // make sure only the proper width is returned 
var width = chwidth;
++i;
};

如果这不起作用，请尝试：

while(i<=length){
$(element1).children().remove();
$(elemen2).appendTo(element1).append(element3);
var elms = $(element3);
var newelms = elms[i].load(function (){
//get the widths inside the load context
var width = this.width();
//pass the single width or el[i].width to next function
};
++i;
};

Answer 4

在阅读任何尺寸之前进行淡入淡出：

$('#image').fadeIn(10,function () {
    var tmpW = $(this).width();
    var tmpH = $(this).height();
});

Answer 5

插入受信任的HTML并获取widths而不触发新事件可以通过在受信任的HTML插入document.getElementById()之后访问其DOM上下文来完成，如下所示：

var element1 = $('element#one');
var element1id = element1.attr('id');
var newElement1 = document.getElementById(''+element1id+'');
var newElement2 = newElement1.children;
var widths = [];
for (var i = 0; i < newElement2.length; ++i) {
   var img = newElement2[i].children;
   widths[i] = img[0].width;
}

然后只需使用widths数组来获取宽度。

Answer 6

我相信你可以使用

$(this).ready(function() {
    // stuff with $(this).width() in here
})

我认为.ready（）不属于该文档。

Answer 7

调用$(document).ready时，图像应该已经加载。还有别的错误。

如果您需要在开始动画之前知道图像的宽度，但是在动画开始时图像需要处于某种形式的隐藏状态，您可以使用.width()之前捕获图像的宽度。动画，并在测量宽度后立即调用.hide()或其他任何合适的东西。

Answer 8

您可以使用setTimeout()函数延迟执行足够长时间以加载图像。

以下是其工作原理的示例：

setTimeout("alert('hello world');", 5000);

第一个参数是一个字符串，您的javascript引擎将解析为执行代码，第二个参数是一个整数值，表示您希望在第一个参数中的代码执行之前延迟多少毫秒。

jQuery width（）返回0

8 个答案: