Heim > Artikel > Web-Frontend > Optimierungsmethoden für das Laden von Bildern in Front-End-Projekten
Dieses Mal werde ich Ihnen die Methode zur Bildladeoptimierung im Front-End-Projekt vorstellen. Was sind die Vorsichtsmaßnahmen für die Methode zur Bildladeoptimierung im Front-End-Projekt? , lass uns einen Blick darauf werfen.
Bilder sind ein sehr wichtiger Teil des Schnittstellenanzeigeeffekts. Das Laden von Bildern hängt mit der Benutzererfahrung und der Anwendungsleistung zusammen. Gängige Strategien zum Optimieren des Ladens von Bildern sind: Vorladen und verzögertes Laden.
#preload-img{ background: url(http://example.com/image.png) no-repeat -9999px -9999px; }Diese Methode wirkt sich jedoch auf die Anzeige anderer Inhalte aus, wenn die Seite zum ersten Mal geladen wird. Sie können einige js hinzufügen
window.onload = function () { let preload = document.createElement('div'); preload.id = 'preload'; document.body.appendChild(preload); }Reines js-VorladenVerwenden js, um das Bildobjekt zu instanziieren. Weisen Sie dann die Anwendungsadresse zu, um ein Batch-Vorladen von Bildern zu erreichen.
window.onload = function () { let images = [ 'http://example.com/image1.png', 'http://example.com/image2.png', 'http://example.com/image3.png', ]; images.forEach((src) => { preload(src); }) }let preload = src => { let img = new Image(); img.src = src; }Lazy LoadingLazy Loading von Bildern kann den Server entlasten. Vorher Bei einer sehr langen Seite hoffen wir, dass das Bild geladen wird, wenn der Benutzer zum entsprechenden Bereich navigiert. Eine übliche Lösung besteht darin, das Attribut data-src für das img-Element zu verwenden, um src zu ersetzen und festzustellen, dass das img-Element dynamisch ist wenn der Benutzer
sichtbarer Bereich
Weisen Sie das src-Attribut zu, um das entsprechende Bild anzuzeigen.Wenn es sich um eine Bilderwandseite handelt, müssen Sie die Standardhöhe für das Bild festlegen, um zu vermeiden, dass alle Bilder geladen werden Das Scroll-Ereignis festlegen
let imageEle = (function(){ let node = document.createElement('img'); document.body.appendChild(node); return { setSrc:function(src){ node.src = src; } } })();//代理对象let proxy = (function(){ let img = new Image(); img.onload = function(){ imageEle.setSrc(this.src); }; return { setSrc:function(src){ img.src = src; imageEle.setSrc('loading.gif'); } } })(); proxy.setSrc('example.png');
Das Scroll-Ereignis kann gespeichert werden. Die Stream-Funktion wird weiter optimiert.Die korrekte Verwendung des Bildladens kann das Benutzererlebnis verbessern, den Anzeigeeffekt der Seite sicherstellen und gleichzeitig die entlasten Der Druck auf den Server ist in gewissem Maße ein Teil der Front-End-Optimierung. Verstehen Sie, welche Lösungen und Strategien uns dabei helfen können, bessere Produkte herzustellen.
Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!
.img{ min-height: 400px; }Empfohlene Lektüre:
let imgs = document.getElementsByTagName("img");let n = 0; //存储加载图片索引let lazyload= ()=> { let cHeight = document.documentElement.clientHeight; var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; //滚动条距离顶部高度 for (let i = n,l = imgs.length; i < l; i++) { let img = imgs[i]; if (img.offsetTop < cHeight + scrollTop) { img.src = img.src == 'loading.gif'? img.getAttribute('data-src'):img.src; n = i + 1; } } }window.onscroll = lazyload;Detaillierte Erklärung der JS-Vererbung
Funktionsdrosselung in JS verwenden
Verwenden Sie JS-Code, um einen Sperreffekt zu erzeugen
Das obige ist der detaillierte Inhalt vonOptimierungsmethoden für das Laden von Bildern in Front-End-Projekten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!