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

Question

我的网站上满载图片。 看到图像缓慢上升是没有吸引力的。 我见过一些网站显示了一个预加载器，该预加载器隐藏了丑陋的加载阶段。 我不是在这里谈论<img />标签，而是在谈论CSS background-image 。

我不明白如何使用Javascript和/或jQuery达到这种效果。

任何帮助将不胜感激。

PS：如果有可用的插件链接，我也将不胜感激。

Answer 1

从设置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 + "')";
    }
}

触发体内onload函数，如下所示：

<body onload="loadImage();">

或将其添加到另一个从此处启动的初始化脚本。

希望这能帮助您前进！

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

问题描述

1 个解决方案

解决方案1
1 已采纳 2014-08-25 21:47:07

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

问题描述

1 个解决方案

解决方案1 1 已采纳 2014-08-25 21:47:07

解决方案1
1 已采纳 2014-08-25 21:47:07