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.

Das Vorladen von Bildern kann das Benutzererlebnis verbessern, was besonders wichtig für Bildergalerien und Webinhalte mit einem großen Anteil an Bildern ist.

CSS-Vorladen

Verwenden Sie das CSS Hintergrund Das Attribut kann Bilder vorab laden, sie jedoch nicht an der Bildschirmposition anzeigen. Wenn die Pfade bei der Verwendung dieser Bilder konsistent sind, gibt der Browser dem Laden der Bilder in den Cache zur Anzeige Vorrang, wodurch der Zweck des Vorladens erreicht wird

#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-Vorladen

Verwenden 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 Loading

Lazy 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 == &#39;loading.gif&#39;? img.getAttribute(&#39;data-src&#39;):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!