微信号:phpdaily

介绍:PHP在线专注于PHP编程语言学习,PHP开发经验分享,工作问题解决以及PHP在线技能测评等多功能为一体的服务系统,希望给工作学习中的PHPER带来些帮助。

使用jQuery实现图片懒加载原理

2018-06-21 08:00 廖雪峰

微信公众号:PHP在线

在网页中,常常需要用到图片,而图片需要消耗较大的流量。正常情况下,浏览器会解析整个HTML代码,然后从上到下依次加载 < img src="xxx">的图片标签。如果页面很长,隐藏在页面下方的图片其实已经被浏览器加载了。如果用户不向下滚动页面,就没有看到这些图片,相当于白白浪费了图片的流量。

所以,淘宝、京东这些流量非常巨大的电商,商品介绍页又必须有大量的图片,因此,这些页面的图片都是“按需加载”,即用户滚动页面时显示出来的时候才加载图片。当网速非常快的时候,用户并不能感知懒加载的动作,既省流量又不影响用户浏览。

本文给出一种利用jQuery实现图片懒加载的原理。它的基本思想是:在输出HTML的时候,不要直接输出<img src="xxx",而是输出如下的img标签:

<img src="/static/loading.gif" data-src="http://真正的图片地址/xxx.jpg">

因此,页面显示的图片是一个gif加载动画。当页面滚动时,如果图片出现在屏幕中,就利用jQuery把的src属性替换为data-src的内容,浏览器就会实时加载。

JavaScript代码如下:

// 注意: 需要引入jQuery和underscore
$(function() {
   // 获取window的引用:
   var $window = $(window);
   // 获取包含data-src属性的img,并以jQuery对象存入数组:
   var lazyImgs = _.map($('img[data-src]').get(), function (i) {
       return $(i);
   });
   // 定义事件函数:
   var onScroll = function() {
       // 获取页面滚动的高度:
       var wtop = $window.scrollTop();
       // 判断是否还有未加载的img:
       if (lazyImgs.length > 0) {
           // 获取可视区域高度:
           var wheight = $window.height();
           // 存放待删除的索引:
           var loadedIndex = [];
           // 循环处理数组的每个img元素:
           _.each(lazyImgs, function ($i, index) {
               // 判断是否在可视范围内:
               if ($i.offset().top - wtop < wheight) {
                   // 设置src属性:
                   $i.attr('src', $i.attr('data-src'));
                   // 添加到待删除数组:
                   loadedIndex.unshift(index);
               }
           });
           // 删除已处理的对象:
           _.each(loadedIndex, function (index) {
               lazyImgs.splice(index, 1);
           });
       }
   };
   // 绑定事件:
   $window.scroll(onScroll);
   // 手动触发一次:
   onScroll();

onScroll()函数最后要手动触发一次,因为页面显示时,并未触发scroll事件。如果图片已经在可视区域内,这些图片仍然是loading状态,需要手动触发一次,就可以正常显示。

要测试图片懒加载效果,可以在Chrome浏览器的控制台选择“Network”,把“Online”改为“Slow 3G”就可以模拟慢速网络下浏览器懒加载图片的效果:


 
PHP在线 更多文章 JavaScript核心概念归纳整理 优秀程序员的10个习惯 为什么in_array(0, ['a', 'b', 'c'])返回true 48条高效率的PHP优化写法 48条高效率的PHP优化写法
猜您喜欢 程序员的周末是风花雪月还是孤独寂寞? Openstack liberty Glance上传镜像源码分析 Google 正式发布 Android 6.0,取名棉花糖同时 SDK 和预览版发布 开学前传之又特么要开学了 IOS开发:iOS单例案例解析