基于Echo.js插件实现的图片懒加载

一张图片就是一个<img>标签,浏览器是否发起请求图片是根据<img>的src属性,所以实现懒加载的关键就是,在图片没有进入可视区域时,先不给<img>的src赋值,这样浏览器就不会发送请求了,等到图片进入可视区域再给src赋值。  

使用中遇到问题

预先在img中的默认图片很小高度可以忽略,又没给img元素设置高度,实现了延迟加载效果,只是全部一次加载(因为元素没高度,导致所有img元素都在可视区域内)

解决方法

使用大一点的图片或者给元素设置高度

如有别的解决办法欢迎留言

<!DOCTYPE html>
<html lang="zh-CN"><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>图片懒加载演示</title>
<style>
.menu { height: 30px; margin-bottom: 30px; padding: 10px; background-color: #f0f0f0; text-align: center;}
.demo img { width: 736px; height: 490px;}
</style>
</head>
<body>
	<h1 style="margin: 40px; font: 32px Microsoft Yahei; text-align: center;">图片懒加载演示</h1>
	<div class="menu"></div>
	<div class="demo" style="width: 736px; margin: 0 auto;">
		<!-- blank.gif  图片的高度很小可忽略-->
		<img src="./js/blank.gif" data-echo="https://img.doub8.com/2020071716002016.jpg">
		<img src="./js/blank.gif" data-echo="https://img.doub8.com/2020071716004630.jpg">
		<img src="./js/blank.gif" data-echo="https://img.doub8.com/2020071716005599.jpg">
		<img src="./js/blank.gif" data-echo="https://img.doub8.com/2020071716004074.jpg">
		<img src="./js/blank.gif" data-echo="https://img.doub8.com/2020111316306857.jpg">
		<img src="./js/blank.gif" data-echo="https://img.doub8.com/2020111316302629.gif">
		<img src="./js/blank.gif" data-echo="https://img.doub8.com/2020111316306857.jpg">
	</div>

	<div class="demo_not" style="width: 736px; margin: 0 auto;">
		<!-- not_blank.jpg  图片有一定的高度-->
		<img src="./js/not_blank.jpg" data-echo="https://img.doub8.com/2020071716002016.jpg">
		<img src="./js/not_blank.jpg" data-echo="https://img.doub8.com/2020071716004630.jpg">
		<img src="./js/not_blank.jpg" data-echo="https://img.doub8.com/2020071716005599.jpg">
		<img src="./js/not_blank.jpg" data-echo="https://img.doub8.com/2020071716004074.jpg">
		<img src="./js/not_blank.jpg" data-echo="https://img.doub8.com/2020111316306857.jpg">
		<img src="./js/not_blank.jpg" data-echo="https://img.doub8.com/2020111316302629.gif">
		<img src="./js/not_blank.jpg" data-echo="https://img.doub8.com/2020111316306857.jpg">
	</div>
	<script src="./js/echo.min.js"></script>
	<script>
	Echo.init({

		offset: 0,//距离可视距离多少在加载

		throttle: 0//延迟时间   毫秒

	});
	</script>
</body>
</html>

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值