上拉刷新，下拉加载，懒加载

实现原理：

1、对图片进行特殊的命名方式，这里我对图片命名直接是1.jpg/2.jpg/3.jpg等等，方便在JS中动态生成

2、监控屏幕滚动条，当滚动到一定距离，动态生成部分数据

HTML部分（CSS代码直接是将图片浮动即可）

<div id="body_wrap">

  <div class="pool-wrap">
    <div style="width:1210px; margin-left:auto; margin-right:auto">
    <!--div11 -->
      <div class="tabCon" id="div11" style="display:block">
      
      <script language="javascript">  
            for(i=1;i<319;i++){  
			
         document.write(" <div class=\"pool-item\"> <img class=\"J_dynamic_img fill_img image-wrap\" src=\"images/"+i+".jpg\" ></div>");  
                }  
      </script>
      </div>    
    </div>
  </div>
</div>

<script type="text/javascript">
var totalheight = 0;     //定义一个总的高度变量
function loatata()
{
    totalheight = parseFloat($(window).height()) + parseFloat($(window).scrollTop());     //浏览器的高度加上滚动条的高度

    if ($(document).height() <= totalheight)     //当文档的高度小于或者等于总的高度的时候，开始动态加载数据
    {
        //加载数据
		
		for(i=1;i<31;i++){ 
$("#div11").append("<div class=\"pool-item\">
<img class=\"J_dynamic_img fill_img image-wrap\" src=\"images/"+i+".jpg\" ></div>");

      
    }
}}

$(window).scroll( function() {
    console.log("滚动条到顶部的垂直高度: "+$(document).scrollTop());
    console.log("页面的文档高度 ："+$(document).height());
    console.log('浏览器的高度：'+$(window).height());
    loatata();
});
</script>

图片懒加载实现

首屏加载，技术上实现要用的技术就是图片懒加载--到可视区域再加载。

实现方式：jqueryLazyload方式

下载地址：https://github.com/helijun/helijun/blob/master/plugin/lazyLoad/jquery.lazyload.js

先给一个HTML结构：

<div class="box">
    <img class="lazy-load" data-original="../img/pic.jpg" width="640" height="480" alt="测试懒加载图片"/>
</div>

jqueryLazyload方式依赖JQ，所以要先加载JQ，再进入懒加载文件。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-3.2.1.min.js"></script>
    <script src="js/index.js"></script>
    <style>
        img{
            width: 100%;
        }
    </style>
</head>
<body>
<div class="box">
    <img class="lazy-load" data-original="img/teacher1.jpg" width="640" height="480"/>
    <img class="lazy-load" data-original="img/teacher1.jpg" width="640" height="480" />
    <img class="lazy-load" data-original="img/teacher2.jpg" width="640" height="480" />
    <img class="lazy-load" data-original="img/teacher3.jpg" width="640" height="480" />
    <img class="lazy-load" data-original="img/teacher4.jpg" width="640" height="480" />
    <img class="lazy-load" data-original="img/teacher5.jpg" width="640" height="480" />
    <img class="lazy-load" data-original="img/teacher6.jpg" width="640" height="480" />
    <img class="lazy-load" data-original="img/teacher7.jpg" width="640" height="480" />
    <img class="lazy-load" data-original="img/teacher8.jpg" width="640" height="480" />
    <img class="lazy-load" data-original="img/teacher9.jpg" width="640" height="480"/>
</div>

</body>
<script>
    $(function() {
      
        $(".lazy-load").lazyload({
            effect : "fadeIn", //渐现，show(直接显示),fadeIn(淡入),slideDown(下拉)
            threshold : 180, //预加载，在图片距离屏幕180px时提前载入
            failure_limit:2 //加载2张可见区域外的图片,lazyload默认在找到第一张不在可见区域里的图片时则不再继续加载,但当HTML容器混乱的时候可能出现可见区域内图片并没加载出来的情况
        });
    });
</script>
</html>

使用jqueryLazyload插件需要注意的几点：

扫描二维码关注公众号，回复： 5741379 查看本文章

1、图片中不使用src属性，因为使用src属性后就会默认发送请求请求图片，使用data-original代替

2、jquery-lazyload.js的参数:

2.1、threshold :设置Threshold参数来实现滚到距离其xx px时就加载。

2.2placeholder :为某一图片路径.此图片用来占据将要加载的图片的位置,待图片加载时,占位图则会隐藏,比如放一些等待加载的图片来优化用户体验效果。

$(function() {
     $("img.lazy").lazyload({
        placeholder: "images/loading.gif"
    });
})

2.3、event ：触发定义的事件时，图片才开始加载（此处click代表点击图片才开始加载，还有mouseover，sporty,foobar(…)）

$(function(){
      $("img.lazy").lazyload({
            event : "click"
      });
})

2.4、effects ：图片显示时的效果，默认是show。

$(function(){
      $("img.lazy").lazyload({
          effects:"fadeIn"
      });
})

2.5、container :值为某容器.lazyload默认在拉动浏览器滚动条时生效,这个参数可以让你在拉动某DIV的滚动条时依次加载其中的图片

$(function(){
        $("img.lazy").lazyload({
            container: $("#container") 
        });
 })

2.6、failure_limit ：一般用于当页面中图片不连续时使用，滚动页面的时候, Lazy Load 会循环为加载的图片. 在循环中检测图片是否在可视区域内，插件默认情况下在找到第一张不在可见区域的图片时停止循环。

 $(function(){
        $("img.lazy").lazyload({
           failure_limit : 20
    });
})

这里设为20表示插件找到 20 个不在可见区域的图片时才停止搜索。

2.7、skip_invisible :为了提升性能，插件默认忽略隐藏的图片；如果想要加载隐藏图片.设置skip_invisible为false;

 $(function(){
        $("img.lazy").lazyload({ 
            skip_invisible : false
    });
})

另一个插件：echo.js方式

一款非常简单实用轻量级的图片延时加载插件echo.js，如果你的项目中没有依赖jquery，那么这将是个不错的选择，50行代码，压缩后才1k。当然你完全可以集成到自己项目中去！

下载地址：https://github.com/helijun/helijun/tree/master/plugin/echo

直接将对方的代码复制过来

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <title>简单的JavaScript图像延迟加载库Echo.js演示1</title>
    <style>
        .demo img { width: 736px; height: 490px; background: url(img/loading.gif) 50% no-repeat;}
    </style>
</head>
<body>
<div class="demo" style="width: 736px; margin: 0 auto;">
    <img class="lazy" src="img/blank.gif" data-echo="img/teacher3.jpg">
    <img class="lazy" src="img/blank.gif" data-echo="img/teacher3.jpg">
    <img class="lazy" src="img/blank.gif" data-echo="img/teacher3.jpg">
    <img class="lazy" src="img/blank.gif" data-echo="img/teacher3.jpg">
    <img class="lazy" src="img/blank.gif" data-echo="img/teacher3.jpg">
    <img class="lazy" src="img/blank.gif" data-echo="img/teacher3.jpg">
    <img class="lazy" src="img/blank.gif" data-echo="img/teacher3.jpg">
</div>
<script src="js/echo.min.js"></script>
<script>
    Echo.init({
        offset: 0,//离可视区域多少像素的图片可以被加载
        throttle: 1000//延迟多少时间加载
    });
</script>

data-echo的图片地址才是真正的图片地址，blank.gif是一张背景图片，包含在插件里了。图片的宽高必须设定，当然，可以使用外部样式对多张图片统一控制大小。当图片还未加载成功的时候显示为loading.gif图片，在当前可视区时，经过1秒钟就会将data-echo图片地址赋给src，图片加载成功。

好了，以上是用插件来实现懒加载效果的。实现起来并不难。我们来梳理一下懒加载的一些知识点

1、实现原理：也就是在HTML中，不给图片地址，给一个自定义的地址，当滑动到那个元素时，将自定义地址给src即可

2、图片在未加载的时候，如果只是图片的话，当加载的时候就会突然出现，发生抖动。如何解决？

可以给图片加一个父级，并给宽高；或者给一个默认的图片，当图片加载成功了，就显示图片。

3、当加载的图片过多，会发生什么问题呢？

当懒加载加载的图片过多，存放的图片数量多，会发生卡顿的现象，解决的办法就是设置一个最大的值，当图片的数量超过这个值的时候，就清除掉这些图片，同时也要清除DOM结构。当再次滑动的时候再重新加载

4、懒加载过程中，图片过渡是如何实现的呢？

其实我们在这里要明白的是，只有当图片加载完成了我们才能给图片过渡效果。如何判断图片加载完成呢？其实这就是img这个标签的一个方法，onload事件。（img.onload=function(){}) 当图片加载完成变化图片的透明度等操作

好了，明白了以上几个问题，我们使用原生JS来实现懒加载，各种场景都考虑到了，也是没有问题的。

上拉刷新，下拉加载，懒加载

猜你喜欢