背景图象装载快速onload没有白色背景

Question

我必须在页面加载时更改背景图像，因为我在主体上使用onload或者我必须使用window.onload哪一个更快的是背景图像加载而不显示白色背景作为页面加载。并且我必须在标签之后将其放在头部或身体上，以便它可以显示为网站打开而不显示白色背景

 $('body').onload('background-image', 'url(http://picture.de/image.png)');

Answer 1

请记住，一旦图像在浏览器中加载，它将在浏览器缓存中，并且只要图像未从浏览器缓存过期，下次使用时加载速度就会快得多。< / p>

对于您的问题，您尝试了两件事。

1）尝试使用javascript预加载图片：

function preloadImage(url) {
    var img=new Image();
    img.src=url;
}

2）优化您的图像。使用tinypng之类的工具来压缩图像。大多数情况下，您可节省高达60％的费用。如果您有一个希望图像适合的容器，请尝试将图像调整为该容器的宽度和高度（使用宽度和高度）。

Answer 2

请查看以下示例。 http://jsbin.com/pozadujeca/edit?js,console,output 使用CSS，您可以将背景颜色应用于图像加载或在后台显示加载器。

我希望它会对你有所帮助 谢谢

Answer 3

我不会采用js路线，而是将图像保存为渐进式jpg：https://optimus.io/support/progressive-jpeg/

Answer 4

首先你可以理解js引擎的流程。它是如何工作的。如果你想在加载js时加载它你可以放入头。如果你想显示背景图像然后你必须放入html。因为html加载在浏览器中的js之前