基于纯JS如何实现多张图片的懒加载

// 1)首先创建一个Ajax对象
var xhr = new XMLHttpRequest;
// 2)打开我们需要请求的数据的那个文件地址
// URL地址后面加随机数目的：清除每一次请求数据时候（get请求）产生的缓存
// 因为每次访问的地址不一样，样浏览器就不会尝试缓存来自服务器的响应，读取本地缓存的数据。
xhr.open('get', 'json/newsList.txt?' + Math.random(), false); // false代表同步
 // 3)监听请求的状态
xhr.onreadystatechange = function () {
  if (xhr.readyState === 4 && /^2\d{2}$/.test(xhr.status)) {
    var val = xhr.responseText;
    jsonData = utils.jsonParse(val);
  }
}
// 4)发送请求
xhr.send(null);

var str = "";
if (jsonData) {
  for (var i = 0, len = jsonData.length; i < len; i++) {
    var curData = jsonData[i];
    str += '
';
    str += '
';
    str += '
' + curData["title"] + '
';
    str += '
' + curData["desc"] + '
';
    str += '
';
    str += '

优势：数据绑定最常用的方式，因为浏览器只需要渲染一次（所有模板引擎数据绑定的原理就是字符串拼接，vue、angular、jade、kTemplate.js等等）

事先把内容拼接好，最后统一添加到页面中，只引发一次回流

弊端：我们把新凭借的字符串添加到#ul1中，原有的三个li的鼠标滑过效果都消失了（原来标签绑定的事件都消失了）
原来，oUl.innerHTML的作用是把原来的标签以字符串的方式取出，原来作为标签的时候，对应事件绑定的东西已经没有了，然后进行字符串拼接，

但是，拼接完成之后，还是字符串！最后再把字符串统一添加到页面中，浏览器还需要把字符串渲染成为对应的标签

3）如何通过对图片的定位计算，触发图片懒加载机制（最关键点）

思路：

A：代表图片距离屏幕顶部的距离

//这里使用了utils工具类中的offset方法，具体实现看下面源码
var A = utils.offset(curImgPar).offsetTop + curImgPar.offsetHeight；

B：代表一屏幕距离+滚动条滚动距离

//这里使用了utils工具类中的win方法，具体实现看下面源码
var B = utils.win("clientHeight") + utils.win("scrollTop");

当A < B的时候，此时懒加载的默认图片才能完整显示出来，这个时候就需要触发图片懒加载

4）加载图片的时候，有渐进显示图片效果

思路，利用window.setInterval 方法，通过对当前图片的透明度属性（curImg.style.opacity） 从透明0开始到透明度1，变化总时间为500ms即可

// ->实现渐现效果
function fadeIn(curImg) {
  var duration = 500, // 总时间
  interval = 10, //10ms走一次
  target = 1; //总距离是1
  var step = (target / duration) * interval; //每一步的步长
  var timer = window.setInterval(function () {
    var curOp = utils.getCss2SS(curImg, "opacity");
    if (curOp >= 1) {
      curImg.style.opacity = 1;
      window.clearInterval(timer);
      return
    }
    curOp += step;
    curImg.style.opacity = curOp;
  }, interval);
}

五、完整代码

1）main.html

  
  
   
  
  
    * {
      margin: 0;
      padding: 0;
      font-family: "Microsoft Sans Serif";
      font-size: 14px;
    }
    ul, li {
      list-style: none;
    }
    img {
      display: block;
      border: none;
    }
    .news {
      padding: 10px;
    }
    .news li {
      position: relative;
      height: 60px;
      padding: 10px 0;
      border-bottom: 1px solid #eee;
    }
    .news li > div:first-child {  /*意思是，li下面的子div，中的第一个*/
      position: absolute;
      top: 10px;
      left: 0;
      width: 75px;
      height: 60px;
      background: url("./img/loading.PNG") no-repeat center center #e1e1e1;
      background-size: 100% 100%;
    }
    /*移动端布局，最外层容器是不设置宽高的*/
 
    .news li > div:first-child img {
      display: none;
      width: 100%;
      height: 100%;
      opacity: 0; /*这里设置为0的目的是，实现渐进的效果，后面的fadeIn函数，作用就是让图片透明都从0变成1*/
    }
 
    .news li > div:nth-child(2) {
      height: 60px;
      margin-left: 80px;
    }
    .news li > div:nth-child(2) h3 {
      height: 20px;
      line-height: 20px;
      /*实现文字超出一行自动裁切*/
      overflow: hidden;
      text-overflow: ellipsis; /*超出部分省略号显示*/
      white-space: nowrap; /*强制不换行*/
    }
    .news li > div:nth-child(2) p {
      line-height: 20px;
      font-size: 12px;
      color: #616161;
    }
  


  
    
      
        
      
      
        
        
      
    
  
 
 
 
 


  var news = document.getElementById("news"),
    imgList = news.getElementsByTagName("img");
 
  // 1、获取需要绑定的数据(通过Ajax)
  var jsonData = null;
  ~function () {
    // 1)首先创建一个Ajax对象
    var xhr = new XMLHttpRequest;
    // 2)打开我们需要请求的数据的那个文件地址
    // URL地址后面加随机数目的：清除每一次请求数据时候（get请求）产生的缓存
    // 因为每次访问的地址不一样，样浏览器就不会尝试缓存来自服务器的响应，读取本地缓存的数据。
    xhr.open('get', 'json/newsList.txt?' + Math.random(), false); // false代表同步
    // 3)监听请求的状态
    xhr.onreadystatechange = function () {
      if (xhr.readyState === 4 && /^2\d{2}$/.test(xhr.status)) {
        var val = xhr.responseText;
        jsonData = utils.jsonParse(val);
      }
    }
    // 4)发送请求
    xhr.send(null);
  }();
  console.log(jsonData);
 
  // 2、数据绑定（使用字符串拼接的方式）
  ~function () {
    var str = "";
    if (jsonData) {
      for (var i = 0, len = jsonData.length; i < len; i++) {
        var curData = jsonData[i];
        str += '
';
        str += '
';
        str += '
' + curData["title"] + '
';
        str += '
' + curData["desc"] + '
';
        str += '
';
        str += '