图片懒加载

最新推荐文章于 2024-05-30 17:38:42 发布

时清云

最新推荐文章于 2024-05-30 17:38:42 发布

阅读量644

点赞数

分类专栏：项目总结 javascript javascript ，app 文章标签：图片懒加载 echo.js

本文链接：https://blog.csdn.net/xiaolinlife/article/details/89669968

版权

javascript 同时被 3 个专栏收录

107 篇文章 2 订阅

订阅专栏

项目总结

84 篇文章 2 订阅

订阅专栏

javascript ，app

7 篇文章 0 订阅

订阅专栏

在项目中遇到的这样一个问题，进入到一个详情页，这个详情页展示的全部是图片，由于有的图片比较大，所以加载的时候就比较慢了，这个时候就要用到了图片懒加载了。其实我在做这个图片懒加载的时候是比较受伤的，同时也意识到自己还有很多东西要学。为什么要这么说呢？我借鉴的是echo.js这个懒加载插件，但是我又不想把它在index.html中进行全局引入，因为我现在做的项目是angular4.0+ionic3.0的框架结构。所以我需要把这个插件重写一下，变成angular的一个小插件。其实用npm install echo-js是可以安装这个插件的，但是在使用的过程中据网友反映会有很多问题，所以我就自己重写了一下。
其实这个插件挺小的，只有短短50行的代码，但是就是这短短50行的代码，我却用花费了一上午的时间来重写它，很很受伤，同时也让我清醒了。
来，我们先看一下echo.js的源码吧

/*!
 *  Echo v1.4.0
 *  Lazy-loading with data-* attributes, offsets and throttle options
 *  Project: https://github.com/toddmotto/echo
 *  by Todd Motto: http://toddmotto.com
 *  Copyright. MIT licensed.
 */
window.Echo = (function(window, document, undefined) {

	'use strict';

	var store = [],
	offset,
	throttle,
	poll;

	var _inView = function(el) {
		var coords = el.getBoundingClientRect();
		return ((coords.top >= 0 && coords.left >= 0 && coords.top) <= (window.innerHeight || document.documentElement.clientHeight) + parseInt(offset));
	};

	var _pollImages = function() {
		for (var i = store.length; i--;) {
			var self = store[i];
			if (_inView(self)) {
				self.src = self.getAttribute('data-echo');
				store.splice(i, 1);
			}
		}
	};

	var _throttle = function() {
		clearTimeout(poll);
		poll = setTimeout(_pollImages, throttle);
	};

	var init = function(obj) {
		var nodes = document.querySelectorAll('[data-echo]');
		var opts = obj || {};
		offset = opts.offset || 0;
		throttle = opts.throttle || 250;

		for (let i = 0; i < nodes.length; i++) {
			store.push(nodes[i]);
		}

		_throttle();

		if (document.addEventListener) {
			window.addEventListener('scroll', _throttle, false);
		} else {
			window.attachEvent('onscroll', _throttle);
		}
	};

	return {
		init: init,
		render: _throttle
	};

})(window, document);

上面就是echo.js的源码，根据我的思路是想把它封装成一种工具，哪个地方需要，引入就好了。
我们先说一下懒加载的原理吧，先看下面这一段代码

<body>
<h1 style="margin: 40px; font: 32px Microsoft Yahei; text-align: center;">简单的JavaScript图像延迟加载库Echo.js演示</h1>
<div class="menu">

	<a class="cur" href="./">演示1</a>

	<a href="index_2.html">演示2（图片延迟5秒加载）</a>
</div>
<div class="demo" style="width: 736px; margin: 0 auto;">

	<img class="lazy" src="images/blank.gif" data-echo="images/big-1.jpg">

	<img class="lazy" src="images/blank.gif" data-echo="images/big-2.jpg">

	<img class="lazy" src="images/blank.gif" data-echo="images/big-3.jpg">

	<img class="lazy" src="images/blank.gif" data-echo="images/big-4.jpg">

	<img class="lazy" src="images/blank.gif" data-echo="images/big-5.jpg">

	<img class="lazy" src="images/blank.gif" data-echo="images/big-6.jpg">

	<img class="lazy" src="images/blank.gif" data-echo="images/big-7.jpg">

</div>
<script src="js/echo.min.js"></script>

<script>

Echo.init({

	offset: 0,

	throttle: 0

});

</script>

这个只是一个简单的例子，在实际项目中我的做法是先把所有的图片数据请求回来，然后把每个图片的url赋值给img标签的data-echo的属性，每个img的src有一个默认url，展示是一个本地的loading图片，然后监听页面的滚动事件，当这个img距离顶部的距离小于可视屏幕的高度时候，就把这个img的data-echo属性值赋值给img的src属性，这就是实现了图片的懒加载。

时清云

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
图片懒加载

在项目中遇到的这样一个问题，进入到一个详情页，这个详情页展示的全部是图片，由于有的图片比较大，所以加载的时候就比较慢了，这个时候就要用到了图片懒加载了。其实我在做这个图片懒加载的时候是比较受伤的，同时也意识到自己还有很多东西要学。为什么要这么说呢？我借鉴的是echo.js这个懒加载插件，但是我又不想把它在index.html中进行全局引入，因为我现在做的项目是angular4.0+ionic3.0...
复制链接

扫一扫