基于纯JS实现多张图片的懒加载Lazy过程解析

站长资源 2024/11/26 佚名

2 0 1

一、效果图如下

上面的效果图，效果需求如下

1、还没加载图片的时候，默认显示加载图片背景图

2、刚开始进入页面，自动加载第一屏幕的图片

3、下拉界面，当一张图片容器完全显露出屏幕，即刻加载图片，替换背景图

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

二、难点

1）如何Ajax请求数据

2）如何动态将json数据绑定到html中。

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

4）加分项，显示图片时有渐现的过渡动画

三、前期知识点

1）Ajax相关知识，XMLHttpRequest对象，所有现代的浏览器都支持此对象。

2）innerHTML，数据绑定使用字符串拼接的方式

3）HTML DOM getAttribute() 方法，返回自定属性名的属性值（主要是用于返回自定义属性的属性值）

4）图片的 onload事件，当图片的src属性的属性值为正确（即能成功加载图片），才能触发图片的onload事件

四、难点逐一攻破

1）如何Ajax请求数据

分四步走

// 1)首先创建一个Ajax对象
var xhr = new XMLHttpRequest;
// 2)打开我们需要请求的数据的那个文件地址
// URL地址后面加随机数目的：清除每一次请求数据时候（get请求）产生的缓存
// 因为每次访问的地址不一样，样浏览器就不会尝试缓存来自服务器的响应，读取本地缓存的数据。
xhr.open('get', 'json/newsList.txt"htmlcode">

var str = "";
if (jsonData) {
  for (var i = 0, len = jsonData.length; i < len; i++) {
    var curData = jsonData[i];
    str += '<li>';
    str += '<div><img src="/UploadFiles/2021-04-02/">

优势：数据绑定最常用的方式，因为浏览器只需要渲染一次（所有模板引擎数据绑定的原理就是字符串拼接，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


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <!--做移动端响应式布局页面，都需要加下面的meta-->
  <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!--meta:vp+tap一键生成-->
  <title>多张图片的延迟加载</title>
  <style type="text/css">
    * {
      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) h2 {
      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;
    }
  </style>
</head>
<body>
  <ul id="news" class="news">
    <!--<li>-->
      <!--<div>-->
        <!--<img src="/UploadFiles/2021-04-02/new1.PNG">

2）utils.js


// 为了与全局变量冲突，我们使用单例模式
var utils = {
 // jsonParse: 把JSON格式的字符串转化为JSON格式的对象
 jsonParse: function (str) {
   var val = null;
    try {
     val = JSON.parse(str);
   } catch (e) {
     val = eval('(' + str + ')');
   }
   return val;
 },
 
 getCss2SS : function(curEle, attr) {
   var val = null, reg = null;
   if ('getComputedStyle' in window) {
     val = window.getComputedStyle(curEle, null)[attr];
   } else {
     if (attr === 'opacity') {
       val = curEle.currentStyle[attr]; // ->返回 alpha(opacity=10)
       reg = /^alpha\(opacity=(\d+("MSIE 8.0") === -1) {
       // 累加父级参照物边框
       totalTop += par.clientTop;
       totalLeft += par.clientLeft;
     }
     // 累加父级参照物本身的偏移
     totalTop += par.offsetTop;
     totalLeft += par.offsetLeft;
     par = par.offsetParent;
   }
   console.log('offsetTop: ' + totalTop + ', offsetLeft: ' + totalLeft);
   var result = {};
   result.offsetTop = totalTop;
   result.offsetLeft = totalLeft;
   return result;
 },
 
 win : function(attr, value) {
   if (value === undefined) {
     return document.documentElement[attr] || document.body[attr];
   }
   document.documentElement[attr] = value;
   document.body[attr] = value;
 }
};


3、json文件


[{"img":"./img/new1.PNG", "title": "1网络强国战略与“十三五”十四大战略", "desc": "1互联网是二十世纪人类最大的发明，互联网是二十世纪人类最大的发明"},
 {"img":"./img/new2.PNG", "title": "2网络强国战略与“十三五”十四大战略", "desc": "2互联网是二十世纪人类最大的发明，互联网是二十世纪人类最大的发明"},
 {"img":"./img/new3.PNG", "title": "3网络强国战略与“十三五”十四大战略", "desc": "3互联网是二十世纪人类最大的发明，互联网是二十世纪人类最大的发明"}
]


以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

                                
                                
                                    js,图片,懒加载

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

评论“基于纯JS实现多张图片的懒加载Lazy过程解析”

暂无评论...

www.wwsws.com 伏龙阁资源网

39,976影音资源

44,792技术资源

21,817软件资源

651,128站长资源

稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！

昨天有一位朋友在大神群里分享，自己亚服账号被封号之后居然弹出了国服的封号信息对话框。

这里面让他访问的是一个国服的战网网址，com.cn和后面的zh都非常明白地表明这就是国服战网。
而他在复制这个网址并且进行登录之后，确实是网易的网址，也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情，因为以前都没有出现这样的情况，现在突然提示跳转到国服战网的网址，是不是说明了简体中文客户端已经开始进行更新了呢？

更新日志

2024年11月26日

基于纯JS实现多张图片的懒加载Lazy过程解析

vue循环数组改变点击文字的颜色

VUE+node（express）实现前后端分离

评论“基于纯JS实现多张图片的懒加载Lazy过程解析”

稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！

更新日志

友情链接