函数每次重新加载的工作方式都不一样

Function working differently every reload

本文关键字：工作 方式 不一样 加载 新加载 函数      更新时间：2023-09-26

我知道这听起来有点奇怪，但我有功能，改变图像的高度和宽度我在准备好的文件上执行它。但每次我刷新页面，我得到不同的结果为相同的图像(它得到他们正确的每4或5次)。下面是我的代码:

$("img").each(function(){
    $(this).width(
      parseInt($(this).width()) / (parseInt($(this).width())/parseInt($(".container").css("height")))
    );
    $(this).height(parseInt($(".container").css("height")));
});

图像在一个容器中，我希望它们具有与容器相同的高度，宽度与高度相等。容器的高度是动态改变的，每次我改变容器的大小，我也改变了图像的大小(我在这里没有问题)。我不太明白为什么每次加载页面时，这种工作方式都会有所不同。

您应该使用$(window).load()函数等待所有图像加载完毕，或者使用其他方法来控制图像加载。选择你的方式，但问题很简单，你的函数被触发之前，图像加载。

你不需要等待图片加载

但是你至少需要等待它们开始加载。

有什么区别?在我所知道的所有图像格式中，元数据的第一部分是图像的尺寸。这就是为什么对于较大的图像，你可以看到浏览器在图像开始加载时预留空间，然后在加载时用图像填充它。

如此!考虑到这一点，让我们让你的页面看起来尽可能清晰，好吗?

忘掉这些，我刚刚意识到，你是在设置高度为容器的高度?在这种情况下…

$("img").each(function(){
    this.style.width = "auto";
    this.style.height = "100%";
});

好了。使用auto的宽度将保持长宽比

相关文章：