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

最新推荐文章于 2024-05-10 09:49:09 发布

起个锤子

最新推荐文章于 2024-05-10 09:49:09 发布

阅读量154

点赞数

分类专栏：前端文章标签： html

本文链接：https://blog.csdn.net/dandelion_lu/article/details/109849228

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

一张图片就是一个<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
评论
基于Echo.js插件实现的图片懒加载

一张图片就是一个<img>标签，浏览器是否发起请求图片是根据<img>的src属性，所以实现懒加载的关键就是，在图片没有进入可视区域时，先不给<img>的src赋值，这样浏览器就不会发送请求了，等到图片进入可视区域再给src赋值。使用中遇到问题预先在img中的默认图片很小高度可以忽略，又没给img元素设置高度，实现了延迟加载效果，只是全部一次加载（因为元素没高度，导致所有img元素都在可视区域内）解决方法使用大一点的图片或者给元素设置高度如有别的解..
复制链接

扫一扫