Question

我的网站载满了大量图片。看到图像缓慢上升是非常不吸引人的。我已经看到一些网站显示了一个预装器，它隐藏了那个丑陋的装载阶段。我这里不是在谈论<img />标记，但我在谈论CSS background-image。

我不明白如何使用Javascript和/或jQuery实现此效果。

任何帮助都将受到高度赞赏。

P.S：如果有可用的插件，我也会感谢插件的链接。

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

像下面这样在body onload中激活函数：

<body onload="loadImage();">

或将其添加到另一个从此处触发的init脚本。

希望这会让你前进！

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

1 个答案: