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

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

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

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

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

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

方案1.

代码:

<body>
<p>
  <img class="zshaowl" www.zshao.vip="http://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="http://www.zshao.vip/zb_users/upload/2021/07/202107191626675555389727.png">
</p>
<p>
  <img class="zshaowl" www.zshao.vip="http://www.zshao.vip/zb_users/upload/2021/07/202107131626140251610706.png">
</p>
<p>
  <img class="zshaowl" www.zshao.vip="http://www.zshao.vip/zb_users/upload/2021/06/202106161623823043193335.png">
</p>
<p>
  <img class="zshaowl" www.zshao.vip="http://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>


上一篇:js代码|利用JS分开插入或植入代码(如何将javascript代码分解成几行)

下一篇:shell命令|通过脚本修改文件内的内容(shell脚本 修改文件)

网友评论