前端图片懒加载实现：原生JS与主流插件方案解析

图片懒加载原理与必要性

在实际项目开发中，常遇到页面包含大量图片的情况，而首屏可视范围内的图片通常仅有一两张。若一次性加载所有图片，不仅会显著拖慢页面渲染速度，还会造成不必要的带宽消耗。因此，采用图片懒加载技术，即仅当图片进入可视区域时才进行加载，成为提升首屏性能的关键手段。

核心思路如下：

将页面中所有<img>标签的src属性替换为自定义属性（如data-xx）。当页面滚动至该图片进入可视区域时，通过JavaScript获取该自定义属性中的图片地址，并将其赋值给src属性，从而触发图片加载。

在实现过程中，需明确以下关键尺寸与位置属性：

1. 页可见区域宽：document.body.clientWidth;
2. 网页可见区域高：document.body.clientHeight;
3. 网页可见区域宽（含边线）：document.body.offsetWidth;
4. 网页可见区域高（含边线）：document.body.offsetHeight;
5. 网页正文全文宽：document.body.scrollWidth;
6. 网页正文全文高：document.body.scrollHeight;
7. 网页被卷去的高：document.body.scrollTop;
8. 网页被卷去的左：document.body.scrollLeft;
9. 网页正文部分上：window.screenTop;
10. 网页正文部分左：window.screenLeft;
11. 屏幕分辨率的高：window.screen.height;
12. 屏幕分辨率的宽：window.screen.width;
13. 屏幕可用工作区高度：window.screen.availHeight;

主流插件实现方案

以下是具体的实现示例：

方案一：jQuery Lazyload方式

插件下载地址：https://github.com/helijun/helijun/blob/master/plugin/lazyLoad/jquery.lazyload.js

<section class="module-section" id="container">
   <img class="lazy-load" data-original="../static/img/loveLetter/teacher/teacher1.jpg" width="640" height="480" alt="测试懒加载图片"/>
</section>

require.config({
  baseUrl : "/static",
  paths: {
    jquery:'component/jquery/jquery-3.1.0.min'
    jqueryLazyload: 'component/lazyLoad/jquery.lazyload',//图片懒加载
  },
  shim: {
    jqueryLazyload: {
      deps: ['jquery'],
      exports: '$'
    }
  }
});

require(
  [
    'jquery',
    'jqueryLazyload'
  ], 
  function($){
    $(document).ready(function() {   
      $("img.lazy-load").lazyload({ 
　　　　　　　　　　effect : "fadeIn", //渐现，show(直接显示),fadeIn(淡入),slideDown(下拉)
　　　　　　　　　　threshold : 180, //预加载，在图片距离屏幕180px时提前载入
　　　　　　　　　　event: 'click', // 事件触发时才加载，click(点击),mouseover(鼠标划过),sporty(运动的),默认为scroll（滑动）
　　　　　　　　　　container: $("#container"), // 指定对某容器中的图片实现效果
　　　　　　　　　　failure_limit：2 //加载2张可见区域外的图片,lazyload默认在找到第一张不在可见区域里的图片时则不再继续加载,但当HTML容器混乱的时候可能出现可见区域内图片并没加载出来的情况
　　　　　　　　}); 
　　　　　　});
　　});

为提升代码可读性，属性值均添加了详细注释。需注意，预制图片属性应使用data-original，且建议预先设置图片的高宽占位，以避免布局抖动。示例中固定为640x480，若为响应式页面，高宽需动态计算。

方案二：Echo.js方式

此前在“前端知识的一些总结”博文中曾介绍过一款简单实用的轻量级图片延时加载插件echo.js。若项目未依赖jQuery，此方案是理想选择，其代码仅50行，压缩后大小约1k。开发者可直接将其集成至项目中。

插件下载地址：https://github.com/helijun/helijun/tree/master/plugin/echo

<style>
　　.demo img { 
　　　　width: 736px; 
　　　　height: 490px; 
　　　　background: url(images/loading.gif) 50% no-repeat;}
</style>

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

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

<script>

Echo.init({
  offset: 0,//离可视区域多少像素的图片可以被加载
　　 throttle: 0 //图片延时多少毫秒加载
}); 

</script>

说明：blank.gif为插件内置的背景占位图。图片必须设定宽高，也可通过外部CSS统一控制多张图片的大小。data-echo属性指向真实图片地址。

方案对比与优化建议

总结：

两种方案实现思路一致，均较为简单，区别在于jQuery Lazyload提供了更多配置属性。实际上，常用的echo.js已足够满足需求，且可轻松集成至项目公共JS中。图片懒加载是常见且实用的功能，若项目仍采用一次性全量加载，建议花费20分钟进行优化。

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