图片延迟加载（用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，如下所示：

然后引入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:; }

  40% { opacity:; }

}

@keyframes loading-circleFadeDelay {

  0%, 39%, 100% { opacity:; }

  40% { opacity:; }

}

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

巴特西

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

最新文章

热门文章