前端学习之图片加载--先加载小图，再加载大图

前言

前端图片加载是一个常见的场景，当图片比较大时会出现加载缓慢的问题，为了提高用户体验，对图片的加载进行优化是有必要的，以下实现图片的优先加载，即准备几多张图片（小、中、大），优先加载小图，等其他图片下载好了再依次加载。

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