背景

最近看到很多网站都运用到了一种前端数据延迟加载技术,包括淘宝,新浪网等等,这样做的目的可以使得一些未显示的图片随 着滚动条的滚动进行延迟显示。

好处显而易见,可以减少前端对于图片的Http请求,减轻对于服务器的压力,对于长篇并且大批量的图片的网页很有帮助。

详细分析

1. 今天就来介绍如何设计这样的一种jQuery插件。

jQuery官方也开放一个Lazyload插件,但是用了一下,发现它 有些问题,在网页加载的时候(具体地址可以参考这个Demo:http://www.appelsiini.net/projects/lazyloa d/enabled_container.html),利用HttpWatch可以发现,六张图片其实都有在下载,只是在下载过程中,他会将src路径转换 为orginal路径,当转换为orginal路径时,http请求就会被终止(Aborted),如果拉动滚动条,它会把original路径再转换为src的 路径。同时可以在HttpWatch中观察到它获取得到一个206的HttpCode,206协议是Partial Content,也就是服务端只接收到了部分Http请求。因此,在图片尺寸比较大的情况下,图片加载较慢,因此请求会被拦截,并且保留客户端数据,在下次Img标签加载Load方法的时候,可以继续请求图片数据。HttpWatch查看效果如下:

图上有3个图片的Http请求被终止。

2. 如果我想让它在网页加载的时候,只要没显示的图片,就不要让它去调用请求,那么该如何实现呢?那么开始以下我的设计。

首先,我们考虑到一个Img标签如果具有src属性,并且已经在 Html加载出来的时候,会自动去请求服务端,甚至<img src=” ” />都会去请求服务端。所以,在你加载具有src路径的图片之前,必须让它不被加载,我这里使用到的一个技巧,将包含Img 标签的DOM元素全仍进一个Textarea文本框中,这样就不会去请求路径。

jQuery插件代码:

//包装延迟加载容器 
$.fn.wraplazyload = function(value) { 
    this.html('<textarea class="text-lazyload">' + value + '</textarea>'); 
};

其中将text-lazyload的display设置为none,让它不显示。

接着,我需要开始“解放”图片了

jQuery插件代码:

var content = $('<div>' + $(this).val().replace (/src=/gi, 'dynamic=') + '</div>'); 
$(this).after(content);

这里的this指的是刚才包装的textarea,这里首先把Html内容 的包含“src=”的文本替换为“dynamic=” (注:这里简单进行 这样的替换,如果一般性的考虑的话),

然后创建一个jQuery对象,在textarea后面追加这样的一个DOM 节点。利用dynamic的替代属性,就防止了图片的加载。

3. 该jQuery插件不尽支持对于Img图片的延迟加载,对于任何 一个DOM节点都可以进行延迟加载。

jQuery插件代码:

element.each(function() { $(this).css('visibility', 'hidden'); }); 

element为一系列DOM元素或者Img标签,注意这里要使用 visibility:hidden,这样才能保持DOM元素或者Img标签的高度,display:none,会将元素的高度置0.

4. 然后,开始编写滚动条触发事件代码:

jQuery插件代码:


代码

$(settings.container).bind(settings.event, function(event) { 

    var pixel = 0;
    if (settings.position == 'vertical') {
        pixel = $(settings.container).height() + $(settings.container).scrollTop();
    }
    else if (settings.position == 'horizontal') {
        pixel = $(settings.container).width() + $(settings.container).scrollLeft();
    }      element.each(function() {
        if ($(this).css('visibility') != 'visible' &&
            (settings.position == 'vertical' && pixel >= $(this).offset().top
                || settings.position == 'horizontal' && pixel >= $(this).offset().left)) {              $(this).css('visibility', 'visible');              if (settings.effect == 'fadeIn') {
                $(this).hide();
                $(this)[settings.effect](settings.effectTime);
            }
            if (settings.loadType == 'item')
                $(this).html($(this).html().replace(/dynamic=/gi, 'src='));
            else if (settings.loadType == 'image')
                $(this).attr('src', $(this).attr('dynamic')).removeAttr('dynamic');
        }
    });
});

当滚动条将图片或者DOM节点给展示出来的时候,会调用$(this).css('visibility', 'visible');

并且如果是加载图片,将调用$(this).attr('src', $(this).attr('dynamic')).removeAttr('dynamic');

如果是加载Dom节点,将调用$(this).html($(this).html ().replace(/dynamic=/gi, 'src='));

思路是将dynamic转换为src,得以进行Http请求。

5. 最后看代码如何应用该插件:

前端JS代码:


代码

var html = '';
html += '<div class="item-lazyload"><img src="http://img9.zol.com.cn/desk_pic/big_152/151653.jpg" width="600" height="500" /><br/><img src="http://img9.zol.com.cn/desk_pic/big_413/412107.jpg" width="600" height="500" /></div>';
html += '<div class="item-lazyload"><img src="http://img9.zol.com.cn/desk_pic/big_152/151656.jpg" width="600" height="500" /></div>';
html += '<div class="item-lazyload"><img src="http://img9.zol.com.cn/desk_pic/big_413/412108.jpg" width="600" height="500" /></div>';
html += '<div class="item-lazyload"><img src="http://img9.zol.com.cn/desk_pic/big_419/418139.jpg" width="600" height="500" /></div>';
html += '<div class="item-lazyload"><img src="http://img9.zol.com.cn/desk_pic/big_152/151647.jpg" width="600" height="500" /></div>';
$('#container2').wraplazyload(html);
$('#container2').datalazyload({ loadType: 'image', effect: 'fadeIn'/*, position: 'horizontal'*/ }); 

Html代码:

<div id="container2"> 
</div>

首先对于container2节点进行包装,然后调用datalazyload方 法,这里loadType加载类型为加载图片“image”,也可以设置为 加载DOM节点“item”,effect为加载效果,position可以设置为 水平加载还是垂直加载,Options参数完整为:

jQuery插件代码:


代码

var settings = {
    dataContainer: '.text-lazyload',
    dataItem: '.item-lazyload',
    loadType: 'item',                   //可以为item(条目加载),img(图片加载)
    container: window,                  //滚动的容器
    event: 'scroll',
    effect: 'normal',                   //效果类型
    effectTime: 1000,                   //效果持续时间
    position: 'vertical'                //可以为vertical(垂直加载),horizontal(水平加载)
};

这些参数都是可设置的,这里不在过多介绍,具体可以查看源代码。

6. 最后,插件只有在滚动条拉到DOM节点或者图片的可视区域的时候,才进行加载,达到了数据延迟加载的效果。该插件已经成功应用到项目中去了.

数据延迟加载JQuery插件的演示地址:http://aspspider.info/sunleepy/lazyload.html

源代码下载

设计一种前端数据延迟加载的jQuery插件(2)的更多相关文章

  1. 前端模板文件化jQuery插件 $.loadTemplates

    工作中使用前端模板引擎,如 artTemplate.jsRender,来替代拼接字符串. 可是直接把模板写在页面上会带来页面臃肿,模板无法重用,与 ASP.NET等后端语言语法冲突等问题. 所以将多个 ...

  2. javascript - 简单实现一个图片延迟加载的jQuery插件

    最近在看一本书<Third-Party Javascript>很不错,推荐给大家,下载地址各位自己搜索了. 步骤: 1.打开google,鉴于google基本打不开,那么就打开这个网址吧. ...

  3. 50个jQuery插件可将你的网站带到另一个高度

    Web领域一直在发生变化并且其边界在过去的每一天都在发生变化(甚至不能以小时为计),随着其边界的扩展取得了许多新发展.在这些进步之中,开发者的不断工作创造了更大和更好的脚本,这些脚本以插件方式带来更好 ...

  4. Handlebars的基本用法 Handlebars.js使用介绍 http://handlebarsjs.com/ Handlebars.js 模板引擎 javascript/jquery模板引擎——Handlebars初体验 handlebars.js 入门(1) 作为一名前端的你,必须掌握的模板引擎:Handlebars 前端数据模板handlebars与jquery整

    Handlebars的基本用法 使用Handlebars,你可以轻松创建语义化模板,Mustache模板和Handlebars是兼容的,所以你可以将Mustache导入Handlebars以使用 Ha ...

  5. Webservice WCF WebApi 前端数据可视化 前端数据可视化 C# asp.net PhoneGap html5 C# Where 网站分布式开发简介 EntityFramework Core依赖注入上下文方式不同造成内存泄漏了解一下? SQL Server之深入理解STUFF 你必须知道的EntityFramework 6.x和EntityFramework Cor

    Webservice WCF WebApi   注明:改编加组合 在.net平台下,有大量的技术让你创建一个HTTP服务,像Web Service,WCF,现在又出了Web API.在.net平台下, ...

  6. 改进网站设计的免费jQuery插件Top 7

    Animate Scroll.js是一个简单的jQuery插件,它用来为滚动增加延迟效果.同时你还可以自定义滚动样式(30多种滚动效果)和滚动速度,还有一个可以操纵”滚动结束位置”的”padding” ...

  7. 支持10种格式的 HTML 表格导出 jQuery 插件

    HTML 表格导出 jQuery 插件可以帮助用户导出 HTML 表格到 JSON.XML.PNG.CSV.TXT.SQL.MS-Word.MS-Excel.MS-PowerPoint 和 PDF 格 ...

  8. 开源来自百度商业前端数据可视化团队的超漂亮动态图表--ECharts

    开源来自百度商业前端数据可视化团队的超漂亮动态图表--ECharts 本人项目中最近有需要图表的地方,偶然发现一款超级漂亮的动态图标js图表控件,分享给大家,觉得好用的就看一下.更多更漂亮的演示大家可 ...

  9. Web前端学习笔记之jQuery基础

    0x0 jQuery介绍 jQuery是一个轻量级的.兼容多浏览器的JavaScript库. jQuery使用户能够更方便地处理HTML Document.Events.实现动画效果.方便地进行Aja ...

随机推荐

  1. C/C++实践笔记 005

    整型常量int a=101u; 无符号整数int b=102l; 长整数int c=103ll; long long整数 存储qq号,手机号 010八进制 0x10十六进制 嵌入式的场合经常用shor ...

  2. C# 文件选择对话框,Unity3d文件保存对话框

    using OpenWinForm = System.Windows.Forms; 在unity3d中,使用FileDialog应该把System.Windows.Forms.dll拷贝到unity工 ...

  3. spring 官方下载地址(Spring Framework 3.2.x&amp;Spring Framework 4.0.x)

    spring官方网站改版后,建议都是通过 Maven和Gradle下载,对不使用Maven和Gradle开发项目的,下载就非常麻烦,下给出Spring Framework jar官方直接下载路径: h ...

  4. 【代码笔记】iOS-底下滚动,上面标题栏也会跟着变动

    一,效果图. 二,工程图. 三,代码. RootViewController.h #import <UIKit/UIKit.h> #import "SVSegmentedCont ...

  5. Java集合的运算之减法A-B

    import com.sun.media.sound.SoftSynthesizer; import java.util.*;   public class a123 { public static ...

  6. Configuring Squid as an accelerator/SSL offload for Outlook Web Access

    reference:http://wiki.squid-cache.org/SquidFaq/ReverseProxy/ Configuring Squid as an accelerator/SSL ...

  7. 内置在虚拟机上64位操作系统:该主机支持 Intel VT-x,但 Intel VT-x 残

    VT-Virtual Technology. 在这里特别说一下:虚拟64位操作系统,须要特别在BIOS中打开VT支持.怎样提示:此主机不支持Intel VT-x,则不可能虚拟出64位系统. 当提示:此 ...

  8. python两段多线程的例子

    记录瞬间 =====================其一===================== # coding:UTF-8 import os import threading from tim ...

  9. JMeter学习(九)FTP测试计划(转载)

    转载自 http://www.cnblogs.com/yangxia-test FTP服务主要提供上传和下载功能.有时间需要我们测试服务器上传和下载的性能.在这里我通过JMeter做一个FTP测试计划 ...

  10. 【转】SQL Server、Oracle、MySQL和Vertica数据库常用函数对比

    SQL Server.Oracle.MySQL和Vertica数据库常用函数对比 Vertica数据库是HP公司新收购的用于BI方面的数据库. 1. 绝对值 S:select abs(-1) valu ...