前端學習之圖片加載--先加載小圖，再加載大圖

前言

前端圖片加載是一個常見的場景，當圖片比較大時會出現加載緩慢的問題，為了提高用戶體驗，對圖片的加載進行優化是有必要的，以下實現圖片的優先加載，即准備幾多張圖片（小、中、大），優先加載小圖，等其他圖片下載好了再依次加載。

HTML代碼如下：

<div class="banner">
            <img src="../../images/case/caseWindFarm/banner-md.png" data-imglg="../../images/case/caseWindFarm/banner-lg.png" alt="">
        </div>

js代碼如下：

//banner img 高清加載
    function imgdownLoad(){
        var setImg = function(imgLgUrl) {
            if(imgLgUrl) {
                var imgObject = new Image();
                imgObject.src = imgLgUrl;
                if(imgObject.complete){ //發現緩存則加載緩存
                    $img.attr("src", imgLgUrl);
                    return ;
                }
                imgObject.onload = function(){ //圖片加載完成后替換圖片
                    $img.attr("src", imgLgUrl);
                }
            }
        }
        $("img").each(function(){
            var $img = $(this);
            var imgLg = $img.attr("data-imglg"); //高清
            var imgMd = $img.attr("data-imgmd"); //中等
            var imgSm = $img.attr("data-imgsm"); //一般
            setImg(imgSm);
            setImg(imgMd);
            setImg(imgLg);
        });
    }