如何防止由于背景图片加载延迟而创建的网页加载时出现白色“闪烁”？ [英] How to prevent the white 'flash' on page load created by background image loading delay?

问题描述

问题是，在大多数网站上，有背景图片。他们需要时间加载。通常，如果图像被优化，并且足够小，它不会是一个问题。但是，在我的一些网站上，javascript文件找到了在页面上的任何其他东西之前加载的方式，即使他们在页脚！这将在加载背景图像之前创建一个白色闪光。为什么我的javascript加载之前的任何其他？我在许多网站上有这个问题，我看到它无处不在。以下是我目前正在处理的网站：

The problem is, on most sites on the web, there are background images. They take time to load. Ordinarily, it wouldn't be a problem if the images were optimized, and small enough. However, on some of my sites, the javascript files find their way to load before anything else on the page, even though they're in the footer! This creates a white "flash" before the background image loads. Why is my javascript loading first before anything else? I'm having this problem on many sites, and I see it everywhere. Here's the site I'm currently working on:

http：// www。 bridgecitymedical.com/wordpress/

谢谢！

tl; dr如何延迟加载的javascript在我的网站上，使得背景图像加载之前的任何东西，从而防止白色闪光浏览器完成下载图像之前。

tl;dr How can I defer loading of javascript on my websites so that the background image loads before anything else, thus preventing that white "flash" before the browser finishes downloading the image.

推荐答案

不要延迟加载网站的部分 - 如果背景图像在传输中有错误，从未到达，会怎么样？

Don't delay loading parts of your site - what if the background image were to have an error in transmission and never arrive? Your scripts would never load.

相反，如果您真的不喜欢白色闪光灯，请将文档的背景颜色设置为更令人愉快的颜色，更符合您的背景图片。您可以使用相同的CSS样式：

Instead, if you really dislike the "white" flash, set the background color of the document to a more pleasing color, more in line with your background image. You can do so in the same css style:

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

这很简单，几乎没有成本， t不必要地延迟下载。看起来你已经在做这样的事情 - 我不会改变它。我不认为任何人都希望您的网站在加载之前看起来一定。

这篇关于如何防止由于背景图片加载延迟而创建的网页加载时出现白色“闪烁”？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！