jQuery的width()方法返回0

11 浏览
0 Comments

jQuery的width()方法返回0

可能是重复问题：

官方方法：在执行某些操作之前，要求jQuery等待所有图像加载完成

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

但是，由于插件函数是在$(document).ready中调用的，它在图像加载之前尝试获取图像的宽度，因此始终返回0。有没有解决这个问题的方法？

0

3 答案

0 Comments

问题原因：当使用jQuery的append()或html()方法将受信任的HTML插入到"element1"中，并且"element2"（可以是div或span）的CSS值设置为float:left以适应"element3"时，如果不触发新的事件，将无法获取到"element3"的offsetWidth、clientWidth或naturalWidth（在Google Chrome中）。

解决方法1：

var element1 = $('div.container');
while(i<=length){
    var element2 = $('').attr({'id':''+[i]+'','class':'container'});
    var element3 = $('').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;
};

解决方法2：

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

解决方法3：

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

如果以上方法都不起作用，可以尝试以下方法：

while(i<=length){
    $(element1).children().remove();
    $(elemen2).appendTo(element1).append(element3);
    var elms = $(element3);
    var newelms = elms[i].load(function (){
        //在加载上下文中获取宽度
        var width = this.width();
        //将单个宽度或el[i].width传递给下一个函数
    });
    ++i;
};

如果希望不加载或使用load事件，请尝试以下方法：

var element1 = document.getElementById(''+element1.attr('id')+'');
var span = element1.children;
for(i=0;i



这样就不需要预加载或使用load事件了。 🙂
0
0 Comments

在使用jQuery的width()方法时，有时会遇到返回0的问题。这个问题的出现原因是因为在使用width()方法时，常常是在页面加载完成后立即调用该方法。然而，由于图片加载需要时间，而$(document).ready()方法只会等待DOM加载完成，而不会等待图片加载完成，所以在此时调用width()方法时，图片可能尚未完全加载，此时返回的宽度值为0。

为了解决这个问题，可以采用预加载图片的方法。预加载图片可以通过创建一个新的Image对象，并将其src属性设置为要加载的图片路径。然后，通过给该对象的onload属性绑定一个回调函数，在图片加载完成后执行该回调函数。在回调函数中，可以通过this.width来获取加载完成的图片的宽度值。

具体的代码如下：

var oImage = new Image();
oImage.onload = function(){
    this.width // 加载完成的图片的宽度值
}
oImage.src = '/path/to/image.gif';

通过以上的代码，可以确保在调用width()方法之前，图片已经加载完成，从而避免返回0的问题。

0
0 Comments

从上述内容中可以得知，问题出现的原因是在使用jQuery的width()方法时返回了0的值。解决方案是使用load事件来确保在元素加载完成后再调用width()方法。

load事件是在元素完全加载完成后触发的事件。在上述代码中，通过给id为image1的元素绑定load事件，在load事件的回调函数中调用了anims()方法。这样可以确保在图片加载完成后再执行相关操作。

load事件是解决这个问题的有效方法，经过尝试后发现只有load事件才能解决这个问题。其他在网上找到的解决方案都无效。

解决这个问题的方法是通过使用load事件来确保在元素加载完成后再调用相关方法或获取相关属性。这样可以避免在元素加载尚未完成时获取到不准确的值。

0