问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

如何防止背景图片加载延迟导致页面加载出现白色“闪烁”？

社区维基
1
新手上路，请多包涵

问题是，在网络上的大多数网站上，都有背景图片。他们需要时间来加载。通常，如果图像经过优化并且足够小，这不会成为问题。然而，在我的一些网站上，javascript 文件会在页面上的任何其他内容之前找到加载方式， 即使它们位于页脚中！这会在加载背景图像之前创建一个白色的“闪光灯”。为什么我的 javascript 首先加载？我在很多网站上都遇到过这个问题，而且到处都能看到。这是我目前正在处理的网站：

http://www.bridgecitymedical.com/wordpress/

谢谢！

tl;dr 我怎样才能推迟在我的网站上加载 javascript，以便背景图像先于其他任何内容加载，从而防止在浏览器完成下载图像之前出现白色“闪烁”。

原文由 alt 发布，翻译遵循 CC BY-SA 4.0 许可协议

Stack Overflow 翻译javascriptcssjquery-deferred
阅读 435
2 个回答
得票最新
社区维基
1
✓ 已被采纳

不要延迟加载网站的某些部分 - 如果背景图像在传输过程中出现错误并且永远无法到达怎么办？您的脚本永远不会加载。

相反，如果您真的不喜欢“白色”闪光灯，请将文档的背景颜色设置为更令人愉悦的颜色，更符合您的背景图像。您可以使用相同的 css 样式来执行此操作：

 body {
    background: #EDEBED url(myGrayBackgroundImage.jpg);
}

它很简单，几乎没有成本，不会中断，也不会因不必要的下载而延迟。看起来你已经在做这样的事情了——我不会改变它。我认为没有人期望您的网站在加载 之前 看起来是某种特定的方式。

原文由 Surreal Dreams 发布，翻译遵循 CC BY-SA 3.0 许可协议

社区维基
1

你可以使用这样的东西：

HTML

 <!-- Add a class to flag when the page is fully loaded -->
<body onload="document.body.classList.add('loaded')">

CSS

 /* Hide slider image until page is fully loaded*/
body:not(.loaded) #slider img {
  display:none;
}

原文由 kbtz 发布，翻译遵循 CC BY-SA 4.0 许可协议

撰写回答
你尚未登录，登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进，让解决方法与时俱进
推荐问题