图片延迟加载（用jq自己写的方法）

$(function() {
            $("img.lazy").attr("src","2.jpg");
            show();
            $(window).scroll(function () {
                show();
            });
            function show(){
                $("img.lazy").each(function () {
                    var clientH = window.screen.availHeight;
                    var $height = $(this).height();
                    var $scroll = $(window).scrollTop();
                    var $off = $(this).offset().top;
                    var $val=$(this).attr("data-original");
                    if ($off - $scroll < clientH) {
                        $(this).attr("src",$val);
                    }
                })
            }
            })

注:我写的这个方法，实现的效果是当图片的上边框显示在可视区域内时，把图片的真实路径赋值给src。

　　如果需要让图片全部显示在可视区域时再换成真实src的话，需要把if判断中的条件换成   $off + $height - $scroll < clientH

首先给需要延迟加载的img标签加个class名lazy，然后把src的路径赋值给data-original，如下所示：

　　<img class="lazy" data-original="images/xinan_searchLogo.png" alt=""/>

然后引入jq文件，然后再把上边的js代码放上即可

思路：1、首先给所有需要延迟加载的图片，添加一个默认的图片(2.jpg)，让页面刚开始加载时只加载一张图片

　　　2、当图片显示在可视区域时，把data-original的值赋给src属性

　　   3、首页刚进入页面时有些图片就显示在可视区域内 所以要首先执行下show方法。然后再让滚轴滚动时再执行show方法

移动端图片延迟加载（css3实现加载转圈图标）

 function img_lazyLoad(imgSrc){
                var $lazy=$("img.lazy");
                //$lazy.attr("src",imgSrc);
                var str='<div class="loading-circle loading-circle1"></div>'+
                        '<div class="loading-circle loading-circle2"></div>'+
                        '<div class="loading-circle loading-circle3"></div>'+
                        '<div class="loading-circle loading-circle4"></div>'+
                        '<div class="loading-circle loading-circle5"></div>'+
                        '<div class="loading-circle loading-circle6"></div>'+
                        '<div class="loading-circle loading-circle7"></div>'+
                        '<div class="loading-circle loading-circle8"></div>'+
                        '<div class="loading-circle loading-circle9"></div>'+
                        '<div class="loading-circle loading-circle10"></div>'+
                        '<div class="loading-circle loading-circle11"></div>'+
                        '<div class="loading-circle loading-circle12"></div>';
                $lazy.each(function () {
                    $(this).parent().addClass("loading");

                    if($(this).parent(".loading").find(".loading-circle").length == 0){
                        $(this).parent(".loading").append(str);
                    }
                    var clientH = $(window).height(),
                            $height = $(this).height(),
                            $scroll = $(window).scrollTop(),
                            $off = $(this).offset().top,
                            $val=$(this).attr("data-original");
                    if ($off + $height - $scroll < clientH) {
                         $(this).attr("src",$val).removeClass("lazy");
                        $(this).load(function(){
                            $(this).parent().removeClass("loading");
                            $(this).parent().find(".loading-circle").remove()
                        })
                    }
                })
            }
            img_lazyLoad();
            $(window).on({
                scroll:function(){
                    img_lazyLoad()
                }
            });

.loading{
    position:relative;
}
.loading .loading-circle {
  margin:-.49rem 0 0 -.49rem;
  width: .98rem;
  height: .98rem;
  position: absolute;
  left: 50%;
  top: 50%;
}
.loading .loading-circle:before {
  content: '';
  display: block;
  margin: 0 auto;
  width: 15%;
  height: 15%;
  background-color: #333;
  @include border-radius(100%);
}
.loading .loading-circle2 { transform: rotate(30deg);-webkit-transform: rotate(30deg);}
.loading .loading-circle3 { transform: rotate(60deg);-webkit-transform: rotate(60deg);}
.loading .loading-circle4 { transform: rotate(90deg);-webkit-transform: rotate(90deg);}
.loading .loading-circle5 { transform: rotate(120deg);-webkit-transform: rotate(120deg);}
.loading .loading-circle6 { transform: rotate(150deg);-webkit-transform: rotate(150deg);}
.loading .loading-circle7 { transform: rotate(180deg);-webkit-transform: rotate(180deg);}
.loading .loading-circle8 { transform: rotate(210deg);-webkit-transform: rotate(210deg);}
.loading .loading-circle9 { transform: rotate(240deg);-webkit-transform: rotate(240deg);}
.loading .loading-circle10 { transform: rotate(270deg);-webkit-transform: rotate(270deg);}
.loading .loading-circle11 { transform: rotate(300deg);-webkit-transform: rotate(300deg);}
.loading .loading-circle12 { transform: rotate(330deg);-webkit-transform: rotate(330deg);}
@-webkit-keyframes loading-circleFadeDelay {
  0%, 39%, 100% { opacity: 0; }
  40% { opacity: 1; }
}
@keyframes loading-circleFadeDelay {
  0%, 39%, 100% { opacity: 0; }
  40% { opacity: 1; }
}
.loading .loading-circle:before {
  animation: loading-circleFadeDelay 1.2s infinite ease-in-out both;
  -webkit-animation: loading-circleFadeDelay 1.2s infinite ease-in-out both;
}
.loading .loading-circle2:before {animation-delay: -1.1s; -webkit-animation-delay: -1.1s; }
.loading .loading-circle3:before { animation-delay: -1s;-webkit-animation-delay: -1s;}
.loading .loading-circle4:before { animation-delay: -0.9s;-webkit-animation-delay: -0.9s; }
.loading .loading-circle5:before { animation-delay: -0.8s;-webkit-animation-delay: -0.8s; }
.loading .loading-circle6:before { animation-delay: -0.7s;-webkit-animation-delay: -0.7s; }
.loading .loading-circle7:before { animation-delay: -0.6s;-webkit-animation-delay: -0.6s; }
.loading .loading-circle8:before { animation-delay: -0.5s;-webkit-animation-delay: -0.5s; }
.loading .loading-circle9:before { animation-delay: -0.4s;-webkit-animation-delay: -0.4s; }
.loading .loading-circle10:before { animation-delay: -0.3s;-webkit-animation-delay: -0.3s; }
.loading .loading-circle11:before { animation-delay: -0.2s;-webkit-animation-delay: -0.2s; }
.loading .loading-circle12:before { animation-delay: -0.1s;-webkit-animation-delay: -0.1s; } 

 

转载于:https://www.cnblogs.com/dongxiaolei/p/6053604.html