在顯示預加載器的同時預加載所有CSS圖像
[英]Preload all CSS images while showing a preloader
問題描述
我的網站上滿載圖片。 看到圖像緩慢上升是沒有吸引力的。 我見過一些網站顯示了一個預加載器，該預加載器隱藏了丑陋的加載階段。 我不是在這里談論<img />標簽，而是在談論CSS background-image 。
我不明白如何使用Javascript和/或jQuery達到這種效果。
任何幫助將不勝感激。
PS：如果有可用的插件鏈接，我也將不勝感激。
1 個解決方案
解決方案1
1 已采納 2014-08-25 21:47:07
從設置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();">
或將其添加到另一個從此處啟動的初始化腳本。
希望這能幫助您前進！
如何在游戲開始前加載所有圖像？ （JavaScript，預加載器）
[英]How to load all images before the game starts? (JavaScript, Preloader)
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.