Question

我尝试在加载页面后检索图像尺寸，以及是否修改了视图端口大小。我可以在使用.load加载页面后检索图像尺寸，但是一旦视图端口被修改，我就无法找到如何检索新图像尺寸。

我编写了一个在文档准备就绪时执行的函数：

$(document).ready(ViewPortUpdate);

修改视口时，我调用相同的函数：

$(window).resize(ViewPortUpdate);

除了仅在文档完成时触发的加载事件以外，如果视口被修改，则该功能在两种情况下都能完美执行。

示例：

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

加载页面后，我看到“查看端口已更新”＃39;并且＆＃39;图片已加载＆＃39;在我的控制台中但是如果我调整窗口大小，我只会看到“更新端口”＃39;我想.load只能工作一次并且改变视口大小没有效果。

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

有什么想法吗？

由于劳伦

Answer 1

你可以试试这个：

data TmpFile = TmpFile FileFormat FilePath
  deriving Show

videoPath :: TmpFile -> Maybe FilePath
videoPath (TmpFile Video p) = p
videoPath _ = Nothing

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

Answer 2

可能的解决方案：

$(window).on("load resize", function() {
  // retrieve image size
});

因为$(window).on("load", someFunction)在所有DOM内容（包括图像）被加载后触发。

但是，如果窗口在完全加载之前调整大小，则可能无法获取所有图像尺寸。在这种情况下，也许：

$(window).on("load", function() {
  viewPortUpdate();
  $(window).on("resize", viewPortUpdate);
});

function viewPortUpdate() {
  // get image sizes;
}

页面刷新

2 个答案: