Question

我正在创建一个非常简单的图片库，它依赖于一些JavaScript来调整浏览器窗口中的图像大小。我有这段代码：

$('img').each( function() {
    var windowHeight = $(window).height()
    var windowWidth = $(window).width()
    var imgHeight = $(this).height()
    var imgWidth = $(this).width()

    console.log("wh: " + windowHeight + "  ww: " + windowWidth)
    console.log("ih: " + imgHeight + "  iw: " + imgWidth)
}

当我加载包含三个图像的页面时，会正确报告这些值，例如：

"wh: 1132  ww: 1650"
"ih: 3456  iw: 4608"
"wh: 1132  ww: 1650"
"ih: 3264  iw: 1836"
"wh: 1132  ww: 1650"
"ih: 3264  iw: 1836"

一旦刷新同一页面（作为本地资源加载），数字就会突然消失：

"wh: 706  ww: 1650"
"ih: 24  iw: 24"

现在我可以根据需要多次重新加载它，图像高度和宽度永远不会被正确报告。但是，当我重命名页面或更改其位置时，一切都在第一次加载时很好。

我认为这与缓存有关，但无法弄清楚如何防止这种情况发生。我显然不在乎浏览器是否缓存图像但是为什么在重新加载页面时会影响它们的属性？关于为什么会这样做的任何想法？

Answer 1

正如A. Wolff所说，你需要在所有图像完全加载时运行你的代码。

jQuery的文档：

在页面完全加载时运行一个函数，包括图形。

$( window ).load(function() {
  // Run code
});

JavaScript中的非确定性图像属性数据

1 个答案: