缓存时，图像宽度在加载时跟踪为零答案

【问题标题】：Image width traces zero with onload when cached缓存时，图像宽度在加载时跟踪为零
【发布时间】：2023-03-27 07:40:01
【问题描述】：

我正在构建一个 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" />');

【问题讨论】：

你可以查看my plugin的代码，看看我是怎么处理的。
@alex，感谢您分享您的插件！如果您也可以在此处将解决方案总结为答案，那就太好了。如果没有，希望其他人很快就会，因为这对我来说也是一个大问题。
您是否尝试在将 onload 处理程序插入 HTML 之前对其进行设置？
Getting width and height of image after jquery load()的可能重复

标签： javascript jquery load loading image

【解决方案1】：

您可能希望切换.html() 和.onload() 调用。

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

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

当您使用它时，您可能希望以 jQuery 的方式执行此操作，这样您附加的事件就更类似于 DOM2 而不是 DOM0。

var image = $('<img/>', { 
    src : 'http://mydomain.com/image.png'
}).load(function () {
    alert(this.width);
})
// maybe clear container before if you want
.appendTo(container);

如果我们必须在onload 之后设置src，我们不妨这样做：

var image = $('<img/>')
    .load(function () {
        alert(this.width);
    })
    .attr('src','http://mydomain.com/image.png')
    .appendTo(container)
    ;

希望它干净利落。

【讨论】：

感谢您的建议。我一直在尝试使用您的示例，但是一旦将元素实际附加到页面，宽度就无法追踪。取消附加会给我数字，但我无法将它添加到页面：/
我发现我可以通过将 append 命令放在实际负载中来使其工作。这会在以后造成问题吗？还有可能跟踪“图像”以外的其他东西的负载，例如将 Flash 加载到其中的

【解决方案2】：

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

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

另外，我发现创建一个新的Image 并分配src 是确定图像是否已加载的最佳方法。

【讨论】：

我检查了你的 JS 插件，它似乎可以工作，但是在图像加载到容器后 - 我尝试跟踪容器的宽度，它仍然返回零，即使容器已经拉伸以适应新的尺寸。
嗨，Alex，我已经使用您的插件更新了我的初始帖子。有时间就去看看，干杯。
@JCraine 如果您可以为问题设置jsfiddle.net，我将很乐意提供帮助。
拜托，如果图像的加载还没有完成，我们必须检查complete 属性，为什么会触发加载事件？我看到load 事件中的函数已执行，但图像的宽度和高度为0。因此，如果检查load 回调中的complete 属性为假，则代码根本不会执行。如果您能帮助我，我将不胜感激

【解决方案3】：

这个答案JavaScript: Know when an image is fully loaded建议你应该在设置src之前设置onload

【讨论】：