javascript - 页面刷新后.load()未执行

Question

我正在尝试在页面加载后以及查看端口大小被修改后检索图像尺寸。我可以在使用 .load 加载页面后检索图像尺寸，但是一旦修改了 View 端口，我还没有弄清楚如何检索新的图像尺寸。

我编写了一个在文档准备好时执行的函数:

$(document).ready(ViewPortUpdate);  

当视口(viewport)被修改时，我调用相同的函数:

$(window).resize(ViewPortUpdate); 

该函数在两种情况下都可以完美执行，但加载事件除外，加载事件仅在文档完成时触发，而在修改视口(viewport)时不再触发。

示例:

function ViewPortUpdate()
{
console.log('view port updated');
$(".myimage").load(function()
    {
      // Here I retrieve the final image size 
      console.log('image loaded');
    }
}

加载页面时，我在控制台中看到“ View 端口已更新”和“图像已加载”，但如果调整窗口大小，我只会看到“ View 端口已更新”。我认为 .load 只能工作一次，并且更改 View 端口大小没有任何效果。

我可能没有使用正确的方法，但我不知道如何解决这个问题。

有什么想法吗？

谢谢 洛朗

Answer 1

你可以试试这个:

$(window).resize(function(){
   ViewPortUpdate();
   $('.myimage').trigger('load');
});

重要提示:我建议删除从加载事件中获取图像大小的部分，并将其作为一个单独的函数，而不是这个。