フロントエンドプロジェクトにおける画像読み込みの最適化方法

今回はフロントエンドプロジェクトにおける画像読み込みの最適化方法についてお届けします。 以下は実際的なケースです。 画像はインターフェイスの表示効果の非常に重要な部分であり、画像の読み込みを最適化するための一般的な戦略は、事前読み込みと遅延読み込みです。

画像のプリロードはユーザー エクスペリエンスを向上させることができます。これは画像ギャラリーや画像の大部分を含む Web コンテンツにとって特に重要です。

CSS のプリロード

画像をプリロードするには、CSS の背景属性を使用しますが、画像は表示されません。これらの画像を使用する際にパスが一致していれば、ブラウザは優先的に画像をキャッシュにロードして表示するため、プリロードの目的は達成されます

#preload-img{
background: url(http://example.com/image.png) no-repeat -9999px -9999px;
}

ただし、この方法は、他のコンテンツの表示に影響を与えます。ページは最初にロードされます。いくつかの js

window.onload = function () {    let preload = document.createElement('div');
    preload.id = 'preload';    document.body.appendChild(preload);
}

純粋な js プリロード

を追加して、画像オブジェクトをインスタンス化し、アプリケーション アドレスを割り当てることができます。これにより、画像のバッチ プリロード

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;
}

遅延読み込み

の画像の遅延読み込みを行うことができます。サーバー上で。

以前は、js

デザイン モード

- プロキシ モード では、仮想プロキシを介して画像の遅延読み込みを実装する方法がありました

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');

長いコンテンツを含む一部のページでは、ユーザーがアクセスしたときに画像が読み込まれることを期待していますこれは一般的に使用されます。解決策は、img 要素の data-src 属性を使用して src を置き換え、img 要素がユーザーの目に見える領域。

画像ウォールページの場合、すべての画像の読み込みを避けるために、画像のデフォルトの高さを設定する必要があります

.img{    min-height: 400px;
}

スクロールイベントを設定します

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;

スクロールイベントは機能を調整して最適化することができます

画像読み込みを正しく使用すると、サーバーへの負荷をある程度軽減しながらページの表示効果を向上させることができ、ソリューションと戦略を理解することが頻繁に行われます。より良い製品を作る。

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

JS継承の詳しい説明

JS関数のスロットリングの使用

JSコードを使用して弾幕エフェクトを作成する

以上がフロントエンドプロジェクトにおける画像読み込みの最適化方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。