1. Definition
Das Vorabladen von Bildern ist eine gute Möglichkeit, das Benutzererlebnis zu verbessern. Es lädt die vom Benutzer benötigten Bilder im Voraus, um sicherzustellen, dass die Bilder schnell und nahtlos veröffentlicht werden, sodass Benutzer beim Surfen auf der Website ein besseres Benutzererlebnis erhalten. Wird häufig in Anwendungen wie Bildergalerien verwendet.
[Hinweis]Wenn das sofortige Laden verwendet wird, erhöht das Laden der geladenen Bilder zusammen mit anderen Inhalten der Seite die Gesamtladezeit der Seite, daher ist es sinnvoller, Fenster zu verwenden .onload.
2. Zwei Ideen
1. Verwenden Sie Hintergrundbilder
Verwenden Sie das Vorladen von Hintergrundbildern für nutzlose Seitenelemente
<style>
body{
margin: 0;
}
img{
width: 100px;
height: 100px;
}
ul{
margin: 0;
padding: 0;
list-style: none;
}
.list li{
height: 0;
width: 0;
}
</style>
</head>
<body>
<button>载入图片</button>
<img src="img/test.png" alt="测试">
<ul class="list">
<li id="preload1"></li>
<li id="preload2"></li>
<li id="preload3"></li>
<li id="preload4"></li>
</ul>
<script>
var oBtn = document.getElementsByTagName('button')[0];
var oImg0 = document.images[0];
var array = ["img/img1.gif","img/img2.gif","img/img3.gif","img/img4.gif"]
var iNow = -1;
oBtn.onclick = function(){
iNow++;
iNow = iNow%4;
oImg0.src = array[iNow];
}
function preLoadImg(){
preload1.style.background = "url('img/img1.gif')";
preload2.style.background = "url('img/img2.gif')";
preload3.style.background = "url('img/img3.gif')";
preload4.style.background = "url('img/img4.gif')";
}
window.onload = function(){
preLoadImg();
}
</script>
</body>
Nach dem Login kopieren
2. Verwenden Sie Image()
Erstellen Sie das ![]()
-Tag über new Image() oder document.createElement('img') und laden Sie dann das Bild über die ![]()
src-Zuweisungsanweisung
<style>
body{
margin: 0;
}
img{
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<button>载入图片</button>
<img src="img/test.png" alt="测试">
<script>
var oBtn = document.getElementsByTagName('button')[0];
var oImg0 = document.images[0];
var array = ["img/img1.gif","img/img2.gif","img/img3.gif","img/img4.gif"]
var iNow = -1;
oBtn.onclick = function(){
iNow++;
iNow = iNow%4;
oImg0.src = array[iNow];
}
var aImages = [];
function preLoadImg(array){
for(var i = 0, len = preLoadImg.arguments[0].length; i < len; i++){
aImages[i] = new Image();
aImages[i].src = preLoadImg.arguments[0][i];
}
}
window.onload = function(){
preLoadImg(array);
}
</script>
</body>
Nach dem Login kopieren
3. Onload-Event
Anhand des Onload-Ereignisses des Bildes können Sie genau wissen, ob das Bild tatsächlich geladen ist, und können anschließend eine Reihe von Vorgängen am Bild ausführen, z. B. das Abrufen der tatsächlichen Breite, Höhe und des Index des aktuellen Bildes usw .
[Hinweis 1] Die src-Zuweisungsanweisung des Bildes muss nach dem Onload-Ereignis des Bildes platziert werden. Andernfalls kann es vorkommen, dass das Bild geladen wurde, die Ereignisbindung jedoch nicht abgeschlossen wurde
<button>载入图片</button>
<script>
var oBtn = document.getElementsByTagName('button')[0];
oBtn.onclick = function(){
preLoadImg('img/test.png');
}
function preLoadImg(url){
var oImg = document.createElement('img');
//在本机环境下，IE8-浏览器下oImg的onload事件放在src后面将无法载入图片
oImg.src = url;
oImg.onload = function(){
document.body.appendChild(oImg);
oImg.onload = null;
oImg = null;
}
}
</script>
Nach dem Login kopieren
[Hinweis 2] Das Onload-Attribut des Image-Objekts verweist auf ein anonymes Funktionsobjekt, und die anonyme Funktion verweist auf das Image-Objekt über seinen Gültigkeitsbereich. Dieser Zirkelverweis führt daher zu einem Speicherverlust sollte freigegeben werden.
【Rekursives Schreiben】
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{
margin: 0;
}
img{
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<button>载入图片</button>
<img src="img/test.png" alt="测试">
<script>
var oBtn = document.getElementsByTagName('button')[0];
var oImg0 = document.images[0];
var array = ["img/img1.gif","img/img2.gif","img/img3.gif","img/img4.gif"]
var iNow = -1;
oBtn.onclick = function(){
iNow++;
iNow = iNow%4;
oImg0.src = array[iNow];
}
var oImg = document.createElement('img');
var iDown = 0;
preLoadImg();
function preLoadImg(){
oImg.onload = function(){
iDown++;
alert('第' + iDown + '张图片的宽:' + this.width + ' 高:' + this.height);
if(iDown < array.length){
preLoadImg();
}else{
oImg.onload = null;
oImg = null;
}
}
oImg.src = array[iDown];
}
</script>
</body>
</html>
Nach dem Login kopieren
[Erwägen Sie eine umfassendere Schreibweise für Fehler]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{
margin: 0;
}
img{
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<button>载入图片</button>
<img src="img/test.png" alt="测试">
<script>
var oBtn = document.getElementsByTagName('button')[0];
var oImg0 = document.images[0];
var array = ["img/img1.gif","img/img2.gif","img/img3.gif","img/img4.gif"]
var iNow = -1;
oBtn.onclick = function(){
iNow++;
iNow = iNow%4;
oImg0.src = array[iNow];
}
var iDown = 0;
var oImage = new Image();
function preLoadImg(arr){
function loadImgTest(arr){
iDown++;
if(iDown < arr.length){
preLoadImg(arr);
}else{
alert('ok');
oImg.onload = null;
oImg = null;
}
}
oImage.onload = function(){
loadImgTest(arr);
};
oImage.onerror = function(){
loadImgTest(arr);
};
oImage.src = arr[iDown];
}
preLoadImg(array);
</script>
</body>
</html>
Nach dem Login kopieren
【Schleifenschreiben】
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{
margin: 0;
}
img{
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<button>载入图片</button>
<img src="img/test.png" alt="测试">
<script>
var oBtn = document.getElementsByTagName('button')[0];
var oImg0 = document.images[0];
var array = ["img/img1.gif","img/img2.gif","img/img3.gif","img/img4.gif"]
var iNow = -1;
oBtn.onclick = function(){
iNow++;
iNow = iNow%4;
oImg0.src = array[iNow];
}
function preLoadImg(arr,callback){
var aImages = [];
var iDown = 0;
for(var i = 0; i < arr.length; i++){
aImages[i] = new Image();
aImages[i].onload = function(){
loadImgTest(arr,callback);
};
aImages[i].onerror = function(){
loadImgTest(arr,callback);
};
aImages[i].src = arr[iDown];
}
function loadImgTest(arr,callback){
iDown++;
if(iDown == arr.length){
alert('ok');
callback && callback.call(aImages);
}
}
}
preLoadImg(array,function(){
console.log(this[0].width);
});
</script>
</body>
</html>
应用：预加载模糊变清晰
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{
margin: 0;
}
img{
width: 500px;
height: 500px;
}
</style>
</head>
<body>
<button>载入图片</button>
<img src="#" alt="测试">
<script>
var oBtn = document.getElementsByTagName('button')[0];
var oImg0 = document.images[0];
var arrayB = ["img/img1.gif","img/img2.gif","img/img3.gif","img/img4.gif"];
var arrayL = ["img/img1.jpg","img/img2.jpg","img/img3.jpg","img/img4.jpg"];
var iNow = -1;
oBtn.onclick = function(){
iNow++;
iNow = iNow%4;
oImg0.src = arrayL[iNow];
aftLoadImg(arrayB,oImg0);
}
var aImages = [];
window.onload = function(){
preLoadImg(arrayL);
}
function preLoadImg(arr){
for(var i = 0, len = arr.length; i < len; i++){
aImages[i] = new Image();
aImages[i].src = arr[i];
}
}
function aftLoadImg(arr,obj){
var oImg = new Image();
oImg.onload = function(){
obj.src = arr[iNow];
}
oImg.src = arr[iNow];
}
</script>
</body>
</html>
Nach dem Login kopieren
Ich hoffe, dass dieser Artikel für das JavaScript-Programmierdesign aller hilfreich sein wird.
