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

Posted 2021-04-12

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

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

有关更多信息，使用WPBakery Visual Composer插件提取图像。我尝试关闭图像视差，完全删除了图像。

我正在检查源代码，但没有任何内容向我发送（我的webdev知识非常基本）。我正在寻找有关在哪里查看代码的任何建议。

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

答案

看起来javascript的东西在初始页面加载后加载。如果你去Google Chrome开发工具 - > Sources - > Then（在右侧）选择Event Listener断点并在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。 编辑 刚刚阅读了hungerstar的评论 - 他展示了更多的原因。我刚刚找到了那个原因的结果。希望能帮助到你。