Question

我正在构建一个Javascript灯箱，我试图在图片加载后调整大小。我正在使用下面的代码，它工作正常 - 一旦加载就会输出正确的宽度。

我的问题：

当我刷新时，它会立即从缓存加载图像，它似乎绕过了负载。我的宽度瞬间为零。为什么会这样？

我的代码：

var oImage = new Image();

oImage.src = 'http://mydomain.com/image.png';

container.html(oImage);

oImage.onload = function(){

    alert(this.width);
}

** 更新 * *

@Alex：这是我用你的插件试过的代码，我想我可能做错了什么。我渴望得到这个，因为你的插件看起来很不错。

container.waitForImages(function() {

    var cWidth = $(this).width();

    alert("width: "+cWidth); // returns 0 - works first time but not cached

});

// Adding the image to the container for preload

container.html('<img src="mygraphic.png" />');

Answer 1

你需要做一些事情......

检查complete元素的img属性。
在设置load属性之前附加src事件。

此外，我发现创建了一个新的Image并指定了src，这是确定图片是否已加载的最佳方式。

Answer 2

您可能需要切换.html()和.onload()来电。

如果图像是从缓存加载的，我想象.html()调用完成之前脚本有机会将函数处理程序附加到图像的{{1}事件。因此，有效地绕过了加载事件本身（因为图像已经已经加载）。

如果它仍在下载图像（即未缓存），则在图像完全渲染之前，将有足够的时间调用onload附加。

当你处于它的时候，你可能想要以jQuery的方式做到这一点，这样你就可以将事件更加类似于DOM2而不是DOM0。

.onload

如果我们必须在var image = $('<img/>', { src : 'http://mydomain.com/image.png' }).load(function () { alert(this.width); }) // maybe clear container before if you want .appendTo(container);之后设置src，我们不妨这样做：

onload

希望干净利落。

Answer 3

此回答JavaScript: Know when an image is fully loaded建议您在设置onload之前设置src

高速缓存时，图像宽度跟踪为零

3 个答案: