js代码|网站优化之图片懒加载（js图片懒加载怎么实现）

时间：2021-08-26 09:58:46 阅读：740

今天发一下“懒加载”的代码，请自行参考使用。

至于什么是懒加载，请自行百度。

已经注释了，还看不明白就别瞎改代码哦。

方案1.

代码：

<body>
<p>
  <img class="zshaowl" www.zshao.vip="https://www.zshao.vip/zb_users/upload/logo/%E9%80%8F%E6%98%8E%E7%AE%80%E6%98%93logo.png">
</p>
<p>
  <img class="zshaowl" www.zshao.vip="https://www.zshao.vip/zb_users/upload/2021/07/202107191626675555389727.png">
</p>
<p>
  <img class="zshaowl" www.zshao.vip="https://www.zshao.vip/zb_users/upload/2021/07/202107131626140251610706.png">
</p>
<p>
  <img class="zshaowl" www.zshao.vip="https://www.zshao.vip/zb_users/upload/2021/06/202106161623823043193335.png">
</p>
<p>
  <img class="zshaowl" www.zshao.vip="https://www.zshao.vip/zb_users/upload/2021/06/202106151623755521831422.png">
</p>

<!-- 
主要的是图片代码中的【class="zshaowl"】和【www.zshao.vip】
把原来的图片 src替换成www.zshao.vip-->
<style> 
//已经写好CSS的网站，可以不用这个css，这个是用来演示的。
body {
  text-align: center;
 }
img {
  width: 100%;
  max-width: 300px;
  height: 200px;
  margin-bottom: 100px; // 为了方便看效果，将图片尽可能的撑开
 }
</style> 

<script language="javascript">
// 图片懒加载类
class zshaowl {
  constructor(el) {
    this.imglist = Array.from(document.querySelectorAll(el)); // 需使用懒加载的图片集合
    this.init(); // 初始化
  }
  // 判断是否该图片是否可以加载
  canILoad() {
    let imglist = this.imglist;
    for (let i = imglist.length; i--;) {
      // 缩写，相当于if true
      this.getBound(imglist[i]) && this.loadImage(imglist[i], i);
    }
  }
  // 获取图片与窗口的信息
  getBound(el) {
    let bound = el.getBoundingClientRect();
    let clientHeight = window.innerHeight;
    // 图片距离顶部的距离 <= 浏览器可视化的高度，从而推算出是否需要加载
    return bound.top <= clientHeight - 100; // -100是为了看到效果，您也可以去掉
  }
  // 加载图片
  loadImage(el, index) {
    // 获取之前设置好的www.zshao.vip值
    let src = el.getAttribute('www.zshao.vip');
    // 赋值到src，从而请求资源
    el.src = src;
    // 避免重复判断，已经确定加载的图片应当从imglist移除
    this.imglist.splice(index, 1);
  }
  // 当浏览器滚动的时候，继续判断
  bindEvent() {
    window.addEventListener('scroll', () => {
      this.imglist.length && this.canILoad();
    });
  }
  // 初始化
  init() {
    this.canILoad();
    this.bindEvent();
  }
 }
// 实例化对象，参数则是需要使用懒加载的图片类名
const lazy = new zshaowl('.zshaowl')

</script> 
</body>

方案2.

代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Lazyload 2</title>
    <style>
	img {
	    display: block;
	    margin-bottom: 50px;
	    height: 200px;
	}
    </style>
</head>
<body>
 <img src="http://www.clxsite.cn/img/loading.gif" data-src="http://www.clxsite.cn/img/cover/a/fc1.jpg">
    <img src="http://www.clxsite.cn/img/loading.gif" data-src="http://www.clxsite.cn/img/cover/a/hpjy2.jpg">
    <img src="http://www.clxsite.cn/img/loading.gif" data-src="http://www.clxsite.cn/img/cover/a/cf1.jpg">
    <img src="http://www.clxsite.cn/img/loading.gif" data-src="http://www.clxsite.cn/img/cover/a/wzry1.jpg">
    <img src="http://www.clxsite.cn/img/loading.gif" data-src="http://www.clxsite.cn/img/cover/a/wzry2.jpg">
    <img src="http://www.clxsite.cn/img/loading.gif" data-src="http://www.clxsite.cn/img/cover/a/cf3shouyou.jpg">
    <img src="http://www.clxsite.cn/img/loading.gif" data-src="http://www.clxsite.cn/img/cover/a/hpjy1.jpg">
    <img src="http://www.clxsite.cn/img/loading.gif" data-src="http://www.clxsite.cn/img/cover/a/fc1.jpg">
    <img src="http://www.clxsite.cn/img/loading.gif" data-src="http://www.clxsite.cn/img/logo.png">
    <img src="http://www.clxsite.cn/img/loading.gif" data-src="http://www.clxsite.cn/img/cover/a/fc1.jpg">
    <img src="http://www.clxsite.cn/img/loading.gif" data-src="http://www.clxsite.cn/img/cover/a/fc1.jpg">
    <img src="http://www.clxsite.cn/img/loading.gif" data-src="http://www.clxsite.cn/img/cover/a/fc1.jpg">
    <script>
	function throttle(fn, delay, atleast) {
	    var timeout = null,
		startTime = new Date();
	    return function() {
		var curTime = new Date();
		clearTimeout(timeout);
		if(curTime - startTime >= atleast) {
		    fn();
		    startTime = curTime;
		}else {
		    timeout = setTimeout(fn, delay);
		}
	    }
	}
	function lazyload() {
	    var images = document.getElementsByTagName('img');
	    var len    = images.length;
	    var n      = 0;      //存储图片加载到的位置，避免每次都从第一张图片开始遍历		
	    return function() {
		var seeHeight = document.documentElement.clientHeight;
		var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
		for(var i = n; i < len; i++) {
		    if(images[i].offsetTop < seeHeight + scrollTop) {
		        if(images[i].getAttribute('src') === 'http://www.clxsite.cn/img/loading.gif') {
			     images[i].src = images[i].getAttribute('data-src');
		        }
			n = n + 1;
		     }
		}
	    }
	}
	var loadImages = lazyload();
	loadImages();          //初始化首页的页面图片
	window.addEventListener('scroll', throttle(loadImages, 500, 1000), false);
    </script>
</body>
</html>

方案3.

代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Lazyload 1</title>
    <style>
        img {
	    display: block;
	    margin-bottom: 50px;
	    height: 200px;
	}
    </style>
</head>
<body>
 <img src="http://www.clxsite.cn/img/loading.gif" www.zshao.vip="http://www.clxsite.cn/img/cover/a/fc1.jpg">
    <img src="http://www.clxsite.cn/img/loading.gif" www.zshao.vip="http://www.clxsite.cn/img/cover/a/hpjy2.jpg">
    <img src="http://www.clxsite.cn/img/loading.gif" www.zshao.vip="http://www.clxsite.cn/img/cover/a/cf1.jpg">
    <img src="http://www.clxsite.cn/img/loading.gif" www.zshao.vip="http://www.clxsite.cn/img/cover/a/wzry1.jpg">
    <img src="http://www.clxsite.cn/img/loading.gif" www.zshao.vip="http://www.clxsite.cn/img/cover/a/wzry2.jpg">
    <img src="http://www.clxsite.cn/img/loading.gif" www.zshao.vip="http://www.clxsite.cn/img/cover/a/cf3shouyou.jpg">
    <img src="http://www.clxsite.cn/img/loading.gif" www.zshao.vip="http://www.clxsite.cn/img/cover/a/hpjy1.jpg">
    <img src="http://www.clxsite.cn/img/loading.gif" www.zshao.vip="http://www.clxsite.cn/img/cover/a/fc1.jpg">
    <img src="http://www.clxsite.cn/img/loading.gif" www.zshao.vip="http://www.clxsite.cn/img/logo.png">
    <img src="http://www.clxsite.cn/img/loading.gif" www.zshao.vip="http://www.clxsite.cn/img/cover/a/fc1.jpg">
    <img src="http://www.clxsite.cn/img/loading.gif" www.zshao.vip="http://www.clxsite.cn/img/cover/a/fc1.jpg">
    <img src="http://www.clxsite.cn/img/loading.gif" www.zshao.vip="http://www.clxsite.cn/img/cover/a/fc1.jpg">
    <script>
        function lazyload() {
	    var images = document.getElementsByTagName('img');
	    var len    = images.length;
	    var n      = 0;      //存储图片加载到的位置，避免每次都从第一张图片开始遍历		
	    return function() {
		var seeHeight = document.documentElement.clientHeight;
		var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
		for(var i = n; i < len; i++) {
		    if(images[i].offsetTop < seeHeight + scrollTop) {
		        if(images[i].getAttribute('src') === 'http://www.clxsite.cn/img/loading.gif') {
			     images[i].src = images[i].getAttribute('www.zshao.vip');
			}
			n = n + 1;
		     }
		}
	    }
	}
	var loadImages = lazyload();
	loadImages();          //初始化首页的页面图片
	window.addEventListener('scroll', loadImages, false);
    </script>
</body>
</html>

历史上的今天

08月

26

热门辅助卡盟

猜你喜欢

2023-08-28 19:42:12html代码|网站底部固定悬浮按钮（html网页浮动窗口）
2023-08-24 03:08:08配置文件-404页面重定向到指定页面
2023-07-30 23:25:23css代码|悬浮按键优化（手机/电脑都显示）
2023-07-29 14:19:25Nginx系统配置server 块内容-404网页重定向
2023-07-29 03:40:53css代码|悬浮按键代码（css悬浮按钮）
2023-07-19 23:50:31php代码|给特定的网站上锁加个密码（php给开放网页加一个密码）
2023-07-16 03:30:57js代码|两秒后把某个标签去除【可以用来做基本的广告】（js 去除标签）
2023-07-05 03:02:15php代码|采集爱站“相关词”，然后写入html页面（php采集网页数据）
2023-07-02 14:38:38php代码|做一个简单的存储和读取（php存储数据）
2023-06-28 13:54:26php/js代码|组合拳-记录访问ip和来访域名【第二版本】（php记录访问者ip）

js代码|网站优化之图片懒加载（js图片懒加载怎么实现）

历史上的今天

猜你喜欢

网友评论