Wie kann das Laden von Bildern verzögert werden?
Jun 22, 2017 am 10:51 AMSind Sie immer noch besorgt über die Ladegeschwindigkeit von Webseiten? Haben Sie jemals festgestellt, dass Webseiten in einigen Browsern sehr schnell, in anderen jedoch sehr langsam sind? Heute möchte ich Ihnen vorstellen, warum diese Situationen auftreten, und Ihnen die spezifischen Implementierungsmethoden mitteilen
1. Erklären Sie Ihnen zunächst, warum Bilder verzögert geladen werden müssen
Jeder kennt das Gängige Bildformate Nun, ein Bild ist eine Gruppe von Pixeln, die nach und nach zusammengesetzt werden. Je mehr Pixel ein Bild hat, desto größer wird es. Im Allgemeinen sind Bilder mehrere KB, mehrere Dutzend KB oder mehrere Megabyte groß. Stellen Sie sich vor, wenn Ihr Bild 10 KB groß ist, spielt es keine Rolle, ob es verzögert ist oder nicht, aber wenn es mehrere Dutzend KB oder Hunderte von KB groß ist, wie viele Sekunden wird der Benutzer dann noch warten müssen? Sie können Benutzer nicht zig Sekunden warten lassen, bis sie den Inhalt nur wegen eines Bildes sehen, oder?
2. Implementierung des verzögerten Ladens von Bildern
Tatsächlich ist die Funktion des verzögerten Ladens von Bildern keine Seltenheit mehr, und einige Browser haben das verzögerte Laden von Bildern implementiert, dies ist jedoch nicht der Fall unterstützt. Was ist mit dem Browser?
Dann werde ich es selbst herausfinden, okay! Nicht viel Unsinn, fügen Sie zuerst den Code ein:
// window.imageList=[
// { id:"图像1ID", url:"URL", onload=加载函数 },
// { id:"图像2ID", url:"URL", onload=加载函数 },
// { id:"图像3ID", url:"URL", onload=加载函数 },
// ....
// ];
//在页面加载完成后调用 onLoadImage();
function onLoadImage()
{
var i=0;
if(window.imageList){
//if(typeof window.imageList != "array")
// return;
for(i=0;i<window.imageList.length;i++){
var now=window.imageList[i];
var id,url,onloadfn;
if(now.id){
id=now.id;
}
if(now.url){
url=now.url;
}
if(now.onload){
onloadfn=now.onload;
}
if(id == null || url == null){
continue;
}
var nelement = document.getElementById(id);
nelement.src = url;
if(onloadfn)
(onloadfn)(nelement,url);
id = url = onloadfn = null;
}
}
console.log("All Image is loaded!Total "+i+" Image!");
if(window.onImageAllLoad)
(window.onImageAllLoad)();
}Beispiel:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>这是一个测试</title>
</head>
<body>
<img id="img1" alt="正在加载"></img>
<img id="img2" alt="正在加载"></img>
<img id="img3" alt="正在加载"></img>
<script src="SuperImageLoader.js"></script>
<script>
window.imageList=[
{
id:"img1",
url:"https://www.baidu.com/img/baidu_jgylogo3.gif",
onload:function(){
alert('第一张图片已加载完成！');
}
},
{ id:"img2", url:"https://www.baidu.com/img/baidu_jgylogo3.gif"},
{ id:"img3", url:"https://www.baidu.com/img/baidu_jgylogo3.gif"}
];
window.onImageAllLoad=function(){
alert('所有图片已加载！');
}
onLoadImage();
</script>
</body>
</html>Das Folgende ist ein Test-Screenshot:
Das obige ist der detaillierte Inhalt vonWie kann das Laden von Bildern verzögert werden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Heißer Artikel
Hot-Tools-Tags
Heißer Artikel
Heiße Artikel -Tags
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
Dreamweaver CS6
Visuelle Webentwicklungstools
SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
Heiße Themen
Wie sende ich Webseiten als Verknüpfung im Edge-Browser an den Desktop?
Mar 14, 2024 pm 05:22 PM
Wie sende ich Webseiten als Verknüpfung im Edge-Browser an den Desktop?
Wie kann das Problem des automatischen Speicherns von Bildern beim Veröffentlichen auf Xiaohongshu gelöst werden? Wo ist das beim Posten automatisch gespeicherte Bild?
Mar 22, 2024 am 08:06 AM
Wie kann das Problem des automatischen Speicherns von Bildern beim Veröffentlichen auf Xiaohongshu gelöst werden? Wo ist das beim Posten automatisch gespeicherte Bild?
Wie poste ich Bilder in TikTok-Kommentaren? Wo ist der Zugang zu den Bildern im Kommentarbereich?
Mar 21, 2024 pm 09:12 PM
Wie poste ich Bilder in TikTok-Kommentaren? Wo ist der Zugang zu den Bildern im Kommentarbereich?
6 Möglichkeiten, Bilder auf dem iPhone schärfer zu machen
Mar 04, 2024 pm 06:25 PM
6 Möglichkeiten, Bilder auf dem iPhone schärfer zu machen
So lassen Sie PPT-Bilder einzeln erscheinen
Mar 25, 2024 pm 04:00 PM
So lassen Sie PPT-Bilder einzeln erscheinen
Mögliche Gründe, warum die Netzwerkverbindung normal ist, der Browser jedoch nicht auf die Webseite zugreifen kann
Feb 19, 2024 pm 03:45 PM
Mögliche Gründe, warum die Netzwerkverbindung normal ist, der Browser jedoch nicht auf die Webseite zugreifen kann
So konvertieren Sie PDF-Dokumente mit Foxit PDF Reader in JPG-Bilder. - So konvertieren Sie PDF-Dokumente mit Foxit PDF Reader in JPG-Bilder
Mar 04, 2024 pm 05:49 PM
So konvertieren Sie PDF-Dokumente mit Foxit PDF Reader in JPG-Bilder. - So konvertieren Sie PDF-Dokumente mit Foxit PDF Reader in JPG-Bilder
Was tun, wenn die Webseite nicht geöffnet werden kann?
Feb 21, 2024 am 10:24 AM
Was tun, wenn die Webseite nicht geöffnet werden kann?
