在显示预加载程序的同时预加载所有CSS图像

Preload all CSS images while showing a preloader

本文关键字：加载 CSS 图像 显示 程序      更新时间：2023-09-26

我的网站上有很多图片。看到这些图像慢慢出现是很不吸引人的。我看到一些网站显示了一个预加载程序，它隐藏了丑陋的加载阶段。我在这里不是在谈论<img />标签，而是在谈论CSS background-images.

我不知道如何使用JavaScript和/或jQuery来实现这种效果。

附言：我也在寻找插件的链接，如果有的话。

从设置css开始：

#myElement
{
    background-image: url('loading.gif');
}

然后使用以下javascript函数：

function loadImage()
{
    var img = new Image;
    img.src = "http://path/to/img";
    img.onload = function() 
    {
        var myElement = document.getElementById("myElement");
        myElement.style.backgroundImage = "url('" + this.src + "')";
    }
}

像这样在加载时激发身体中的功能：

<body onload="loadImage();">

或者将它添加到从这里启动的另一个init脚本中。

希望这能让你继续前进！

相关文章：