如何防止实时调整图像大小（在页面加载期间）答案

【问题标题】：How to Prevent Image Resizing In Real Time (during page load)如何防止实时调整图像大小（在页面加载期间）
【发布时间】：2019-09-11 23:07:25
【问题描述】：

当我访问我网站的主页时，页面顶部的标题图像以 90% 的宽度加载，然后随着页面的继续加载扩展至 100% 的宽度。如果向下滚动，看起来所有元素都是全宽的，最初加载大约是全宽的 90%，然后继续展开。

我试图找出代码中发生这种情况的位置。我认为它可能在 css 样式表中，但我没有任何运气找到它。我最好的猜测是在图像展开之前加载了某种包装器？

有关更多信息，图像正在使用 WPBakery Visual Composer 插件拉入。我尝试关闭图像视差，将图像完全移除。

我正在检查源代码，但没有任何反应（我的 webdev 知识非常基础）。我正在寻找有关在哪里查看代码的任何建议。

我不确定是什么导致了问题，但是可以在这里查看源代码：https://dev-nurseregistry.pantheonsite.io/

【问题讨论】：

首先！请哦，请取消页面中任何声音的自动播放！
Visual Composer（个人不是粉丝）正在复制您的页面内容并将其放置在移动和桌面容器中。首先显示的是移动版，然后是桌面版。这就是为什么它会折断。在站点构建工具之外很少需要这种类型的方法。网站构建工具，虽然它们可以为非技术用户“简化”一些事情，但如果您没有 Web 开发背景，它们会产生诸如此类的各种其他问题，这些问题很难调试。
我继续为台式机和移动设备绘制了 2 个单独的块，并将其替换为 1 个块以供两者使用。（还静音了 YT 视频）。解决了这个问题。谢谢！

标签： css image resize width pageload

【解决方案1】：

似乎在初始页面加载后加载了来自 Javascript 的内容。如果您转到 Google Chrome 开发工具 -> Sources -> 然后（在右侧）选择 Event Listener breakpoints 并在 DOM Mutation 下检查DOMContentLoaded 并重新加载页面，它将逐步加载DOM。在初始加载元素有一点不同的风格 - 你的 div.site-inner 不是全宽。
当您单击屏幕上的那个蓝色小播放按钮时，它会继续前进。经过 4 或 5 步后，内容变为全宽。如果您查看网络选项卡（也在开发工具中），您可以看到 widgets.js 和 platform.js 已加载，之后还有一些图像。我会说你必须在你的 js 文件中查看你在初始页面加载后加载的内容。
当比较加载的页面和部分加载的页面时，它显示vc_section hide-mobile 为display: block 和vc_section hide-desktop 为display: none。

编辑
只需阅读饥饿之星的评论 - 他更多地说明了原因。我刚刚找到了那个原因的结果。希望对您有所帮助。

【讨论】：