一、PC端（lazyload）
1、引入js文件
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.lazyload/1.9.1/jquery.lazyload.min.js"></script>
2、html代码
<img src="images/blank.gif" alt="" data-original="images/azu1.jpg">
3、调用lazyload
$("img").lazyload({
// 当图片完全加载的时候，插件默认地使用show()方法来将图显示出来。你也可以使用其他的效果
effect: "fadeIn",
//lazyload插件默认用户滚动到图片位置时才触发加载图片，如果我们希望滚动到距离图片一定位置就触发加载，可以指定lazyload函数的threshold参数
threshold: 200,
//如果我们希望滚到到图片的位置后，还要通过click或hover事件来唤醒图片的加载，我们可以指定lazyload函数的event属性
event: "click"
});
二、移动端采用echo.js插件
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>图片懒加载(预加载)插件echo.js</title>
<style>
*{ margin:0; padding:0; list-style:none}
.lanren{ width:440px; height:auto; margin:100px auto;}
.lanren li{ width:200px; height:200px; margin:10px 10px 0 0; float:left; overflow:hidden}
.lanren li img{ width:200px; height:200px; border:0;background: url(‘data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEQAAAAWCAYAAAB5VTpOAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyBpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBXaW5kb3dzIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjZEQkQ3NDZFOEYxNzExRTQ5NUZCRjQzMkM2RTA1RTJEIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjZEQkQ3NDZGOEYxNzExRTQ5NUZCRjQzMkM2RTA1RTJEIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6NkRCRDc0NkM4RjE3MTFFNDk1RkJGNDMyQzZFMDVFMkQiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NkRCRDc0NkQ4RjE3MTFFNDk1RkJGNDMyQzZFMDVFMkQiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz5hmE5XAAACP0lEQVR42uxYy3HCMBA1DPe4g5AKYiqwUwF0YHPiSirAVAA5copLIBUgOnAJTgemAkeaeZq8ESvGgJPh4J3ZsbQyq9XT/sygaZqgp18a9ID0gPSA3AXIYrGww63mUnNxh36leQk9hjLNkeZc85jkbfQUd9pyRrvd7kw2uvC+Mby+YZ+ExjHmIeZj6DUgrTTPWx4yBih/ThIgY3CIpz1gjRuVYuyNDM6dtYyA5XeM7k+s7R8lZCRAMtyeoVfNKcZHAued3P1wwUMaeIMEVgYde8crtx5bM0d3gN8vuwRkKMiM0QMAsMZ4LRiiBDfOAUJDnnSg+Qrub+cbPO1BQ6xXpN/uIcmi//CQeygnL1A4RObc8tbJKZWgp3DAXmGeO3sljw4I54kYB+aDmfB4otAy3vPiAeVhcggn11toixv+QsKshNCypffoASPy2JN0YN/NgDxT4rwmVhN4QSFUnJLcPUZ1kmgjyFJK8AEl+k5p6JHPKJEFFPNt6Yjsb281p1Jr1qaaPwTPqbE+QTK3HFCCtzy/orHrBJDvGzdcAoSEwiWn8hpSaFkQIvKgpOW+hVByXVmIfRMnHPe+kBt6YjWlDjIC820enNLK4cJl1/YxOSqMgv4TZBEl2S4odQCJ4I2Zc9lTX4UaeZA/Ua9hjebk52vMFOUF23QpPAsqwxG61Bnt1QVNnM8NBVnllGvl+xSQAKmpu7SeUZPHrHHAiuaVUHaZKuoq7SdA6fQtXVDZUqb6z//+/5AekB6Qv6AfAQYAZXq9jhikZ9kAAAAASUVORK5CYII=‘) no-repeat center #ccc;}
</style>
</head>
<body>
<!-- 代码部分begin -->
<div class="lanren">
<li><img src="images/blank.gif" data-echo="images/azu1.jpg" /></li>
<li><img src="images/blank.gif" data-echo="images/azu2.jpg" /></li>
<li><img src="images/blank.gif" data-echo="images/azu3.jpg" /></li>
<li><img src="images/blank.gif" data-echo="images/azu4.jpg" /></li>
<li><img src="images/blank.gif" data-echo="images/azu5.jpg" /></li>
<li><img src="images/blank.gif" data-echo="images/azu6.jpg" /></li>
<li><img src="images/blank.gif" data-echo="images/azu7.jpg" /></li>
<li><img src="images/blank.gif" data-echo="images/azu8.jpg" /></li>
<li><img src="images/blank.gif" data-echo="images/azu9.jpg" /></li>
<li><img src="images/blank.gif" data-echo="images/azu10.jpg" /></li>
<li><img src="images/blank.gif" data-echo="images/azu11.jpg" /></li>
<li><img src="images/blank.gif" data-echo="images/azu12.jpg" /></li>
<li><img src="images/blank.gif" data-echo="images/azu13.jpg" /></li>
<li><img src="images/blank.gif" data-echo="images/azu14.jpg" /></li>
<li><img src="images/blank.gif" data-echo="images/azu15.jpg" /></li>
<li><img src="images/blank.gif" data-echo="images/azu16.jpg" /></li>
<li><img src="images/blank.gif" data-echo="images/azu17.jpg" /></li>
<li><img src="images/blank.gif" data-echo="images/azu18.jpg" /></li>
<li><img src="images/blank.gif" data-echo="images/azu19.jpg" /></li>
<li><img src="images/blank.gif"data-echo="images/azu20.jpg" /></li>
</div>
<script src="js/echo.min.js"></script>
<script>
echo.init();
</script>
<!-- 代码部分end -->
</body>
</html>
原文地址：https://www.cnblogs.com/yang-2018/p/11023747.html
时间： 2025-01-06 18:17:43