由于某些原因，使用JavaScript应用的图像最大高度有时不起作用

下面的代码获取未设置高度的“我的导航栏”的高度，然后获取视口高度并设置最大高度。特定图像到视口高度-导航栏高度。不幸的是，我意识到我遇到了一个小问题

当我第一次加载页面时，检查后，在element.style字段中正确设置了图像最大高度，但是，如果我使用Ctrl+R刷新，图像将丢失JavaScript设置的最大高度，并开始使用CSS中设置的最大高度，我不希望这样。如果使用Ctrl+Shift+R再次刷新，图像将再次获得JavaScript设置的最大高度

现在，考虑到我第一次加载图像时代码工作正常，并且Ctrl+Shift+R在不使用缓存的情况下重新加载页面，我假设它只与缓存的图像有关

我已经应用了下面的代码，但我不认为出于某种原因这里可以看到问题

$document.readyfunction{ 函数图像{ var navHeight=$nav.navigation.outerHeight； var viewport=$window.height； $.specific image.css{max height:viewport navHeight}； } $.specific image.onload，fitImage； $window.onresize，fitImage； }; *，*：之后，*：之前{ 保证金：0； 填充：0； -webkit框大小：边框框； 框大小：边框框； 文字装饰：无； } a{ 颜色：F1F1； } html{ 字体大小：16px； } 身体{ 背景色：fafa； 字体系列：“Roboto”，无衬线； 身高：100%； 宽度：100%； } .导航{ 背景色：171717； } .导航ul{ 显示器：flex； } .navigation ul>li:not.dropdown{ 填充：15px 13px 15px 13px； 字号：500； 文本对齐：居中； 字号：1em； 颜色：白色； 背景色：151719； 列表样式类型：无； } .特定图像flexbox{ 显示器：flex； } .特定图像列{ 弹性：4； } .特定图像容器{ 文本对齐：居中； 宽度：100%； } .特定图像{ 显示：块； 最大高度：100vh； 最大宽度：100%； 保证金：0自动； }

---

您的问题在这一行：

$(".specific-image").on("load",fitImage);

:

与图像一起使用时加载事件的注意事项

开发人员使用.load快捷方式试图解决的一个常见问题是在图像或图像集合完全加载后执行函数。有几个已知的注意事项需要注意。这些是：

它在跨浏览器中无法稳定工作，也不可靠 如果图像src设置为与以前相同的src，则在WebKit中无法正确触发 它不能正确地在DOM树上冒泡 对于已经存在于浏览器缓存中的图像，可以停止激发

因此，我建议将该行替换为：

fitImage(); // a direct call on doc ready....

函数图像{ var navHeight=$nav.navigation.outerHeight； var viewport=$window.height； $.specific image.css{max height:viewport navHeight}； } $document.readyfunction{ fitImage； $window.onresize，fitImage； }; *，*：之后，*：之前{ 保证金：0； 填充：0； -webkit框大小：边框框； 框大小：边框框； 文字装饰：无； } a{ 颜色：F1F1； } html{ 字体大小：16px； } 身体{ 背景色：fafa； 字体系列：“Roboto”，无衬线； 身高：100%； 宽度：100%； } .导航{ 背景色：171717； } .导航ul{ 显示器：flex； } .navigation ul>li:not.dropdown{ 填充：15px 13px 15px 13px； 字号：500； 文本对齐：居中； 字号：1em； 颜色：白色； 背景色：151719； 列表样式类型：无； } .特定图像flexbox{ 显示器：flex； } .特定图像列{ 弹性：4； } .特定图像容器{ 文本对齐：居中； 宽度：100%； } .特定图像{ 显示：块； 最大高度：100vh； 最大宽度：100%； 保证金：0自动； }

---

在窗口加载时运行它-在图像加载之前，高度和宽度不能正确提供，有时可以在dom就绪后加载-因此jquery将知道图像，但没有正确的尺寸。此外，将其绑定到图像的加载事件有时也不起作用，因为我发现，如果从缓存加载，图像的加载事件有时不会触发，这就是为什么您必须进行硬刷新才能正常工作，从而完美地修复了我的问题。非常感谢。