如何用JavaScript实现图片懒加载技术？

2026-04-01 16:492阅读0评论SEO资源

内容介绍
文章标签
相关推荐

本文共计1158个文字，预计阅读时间需要5分钟。

懒加载技术+懒加载（LazyLoad）是前端优化的一种高效方式，显著提升用户体验，实现图片等资源按需加载，极大减少页面加载时间。原理：

懒加载技术

懒加载（LazyLoad）是前端优化的一种有效方式，极大的提升用户体验，图片一直是页面加载的流浪大户，现在一张图片几兆已经是很正常的事，远远大于代码的大小。

原理：页面加载后只让文档可视区内的图片显示，其它不显示，随着用户对页面的滚动，判断其区域位置，生成img标签，让到可视区的图片加载出来。

所用相关技术：给img加属性 (例如data-src），将图片的地址赋值给他，这样就生成img标签后再把data-src的值赋给img的src（通过dataset.src或者getAttribute('src'),再赋值给img.setAttribute('src')）。

jqueryLazyload方式

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ margin:0px; padding: 0; } .wrap{ overflow: hidden; width:915px; background:#2d2d2d; margin:50px auto; border-radius:10px; /*font-size:0px;*/ } .wrap img{ float:left; display: block; width:280px; height:180px; margin:10px 10px; border:2px solid #7c7c7c; border-radius:10px; } </style> </head> <body> <div class="wrap"> <img src="js/images2/1.jpg" /> <img src="js/images2/2.jpg" /> <img src="js/images2/3.jpg" /> <img src="js/images2/4.jpg" /> <img src="js/images2/5.jpg" /> <img src="js/images2/6.jpg" /> <img src="js/images2/7.jpg" /> <img src="js/images2/1.jpg" /> <img src="js/images2/2.jpg" /> <img src="js/images2/3.jpg" /> <img src="js/images2/4.jpg" /> <img src="js/images2/5.jpg" /> <img src="js/images2/6.jpg" /> <img src="js/images2/7.jpg" /> <img src="js/images2/1.jpg" /> <img src="js/images2/2.jpg" /> <img src="js/images2/3.jpg" /> <img src="js/images2/4.jpg" /> <img src="js/images2/5.jpg" /> <img src="js/images2/6.jpg" /> <img src="js/images2/7.jpg" /> <img src="js/images2/1.jpg" /> <img src="js/images2/2.jpg" /> <img src="js/images2/3.jpg" /> <img src="js/images2/4.jpg" /> <img src="js/images2/5.jpg" /> <img src="js/images2/6.jpg" /> <img src="js/images2/7.jpg" /> <img src="js/images2/1.jpg" /> <img src="js/images2/2.jpg" /> <script src="js/jquery-1.11.1.min.js"></script> <script src="js/lazyload.js"></script> <script> $("img").lazyload({ placeholder :"images2/loading.gif", //用图片提前占位 // placeholder,值为某一图片路径.此图片用来占据将要加载的图片的位置,待图片加载时,占位图则会隐藏 effect: "fadeIn", // 载入使用何种效果 // effect(特效),值有show(直接显示),fadeIn(淡入),slideDown(下拉)等,常用fadeIn threshold: 200, // 提前开始加载 // threshold,值为数字,代表页面高度.如设置为200,表示滚动条在离目标位置还有200的高度时就开始加载图片,可以做到不让用户察觉 // event: 'click', // 事件触发时才加载 // event,值有click(点击),mouseover(鼠标划过),sporty(运动的),foobar(…).可以实现鼠标莫过或点击图片才开始加载,后两个值未测试… //container: $("#container"), // 对某容器中的图片实现效果 // container,值为某容器.lazyload默认在拉动浏览器滚动条时生效,这个参数可以让你在拉动某DIV的滚动条时依次加载其中的图片 //failurelimit : 10 // 图片排序混乱时 // failurelimit,值为数字.lazyload默认在找到第一张不在可见区域里的图片时则不再继续加载,但当HTML容器混乱的时候可能出现可见区域内图片并没加载出来的情况,failurelimit意在加载N张可见区域外的图片,以避免出现这个问题. }); </script> </div> </body> </html>

echo.js方式

echo.js是一款非常简单实用轻量级的图片延时加载插件，如果你的项目中没有依赖jquery，那么这将是个不错的选择，50行代码，压缩后才1k。当然你完全可以集成到自己项目中去。

下载地址：github.com/helijun/helijun/tree/master/plugin/echo

说明：blank.gif是一张背景图片，包含在插件里了。图片的宽高必须设定，当然，可以使用外部样式对多张图片统一控制大小。data-echo指向的是真正的图片地址。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持易盾网络。

标签：懒加载技术实现过程