`
zpopopo
  • 浏览: 9917 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

分享前端数据延迟加载的jQuery插件设计教程

阅读更多
http://www.xueit.com/js/show-6728-1.aspx

背景
最近看到很多网站都运用到了一种前端数据延迟加载技术,包括淘宝,新浪网等等,这样做的目的可以使得一些未显示的图片随 着滚动条的滚动进行延迟显示。
好处显而易见,可以减少前端对于图片的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插件代码:
Code [http://www.xueit.com]
$(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代码:
Code [http://www.xueit.com]
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代码:
Code [http://www.xueit.com]
<div id="container2">
</div>
首先对于container2节点进行包装,然后调用datalazyload方 法,这里loadType加载类型为加载图片“image”,也可以设置为 加载DOM节点“item”,effect为加载效果,position可以设置为 水平加载还是垂直加载,Options参数完整为:
jQuery插件代码:
Code [http://www.xueit.com]
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
源代码下载
分享到:
评论
1 楼 superman_wc 2011-11-17  
好像对于<iframe> 有Bug啊, 加在<textarea>里的 iframe 就没加载内容了哦!

能看看这个问题怎么解决吗?

相关推荐

    网页图片懒加载jquery插件

    总的来说,"网页图片懒加载jquery插件"是一个帮助开发者轻松实现网页图片延迟加载的工具,通过它,我们可以优化网页性能,提升用户浏览体验,尤其是在资源有限的移动设备上。理解其工作原理和使用方法,能有效地改善...

    jquery.lazyload图片预加载效果 jquery预加载

    jQuery LazyLoad 是一个jQuery插件,它的主要功能是在用户滚动页面到图片所在位置时才开始加载图片,而不是在页面初始加载时就一次性加载所有图片。这种方式大大减少了首次加载页面时的数据量,提高了页面的加载速度...

    延迟加载插件

    在标题提到的“延迟加载插件”中,我们可以推测这是一个用于JavaScript库,可能是jQuery的一个插件,帮助开发者实现页面元素的延迟加载效果。描述中的“本人亲测”暗示了这个插件已经过实际验证,具有可靠性和实用性...

    jQuery图片延时加载插件imgLazyLoad

    imgLazyLoad是一款轻量级的jQuery插件,它允许开发者延迟加载网页上的非可视区域图片,从而提高页面的初始加载速度。该插件的核心原理是监听滚动事件,当图片进入浏览器窗口的可视区域时,再进行实际的加载,这样...

    jQuery图片延迟加载插件Lazy Load.zip

    jQuery图片延迟加载插件Lazy Load是一种高效的前端技术,旨在优化网页性能,特别是在包含大量图片的网页上。在当今互联网环境中,用户体验是至关重要的,而快速的页面加载速度是提升用户体验的关键因素之一。Lazy ...

    jquery实现网页图片等待延时加载Loading插件源码.zip

    标题"jquery实现网页图片等待延时加载Loading插件源码.zip"表明这个压缩包包含了使用jQuery编写的插件源码,该插件能够实现在网页上图片的延迟加载,并在加载过程中显示一个“Loading”指示器,以告知用户图片正在...

    jquery 插件DataTable 最新版本下载

    总的来说,jQuery插件DataTable是现代Web应用中处理和展示表格数据的强大工具。其丰富的功能、强大的API和良好的社区支持,使其成为许多开发者的首选。在使用最新版本时,开发者应充分利用其提供的各项功能,同时...

    jQuery网页加载进度条插件

    **jQuery网页加载进度条插件** 是一个用于增强用户体验的工具,主要针对的是网页内容的异步加载过程。它利用了**pace.js** 这个库,能够实时地展示页面加载进度,给予用户一个视觉反馈,让他们知道网页正在加载且...

    web前端插件整合

    "web前端插件整合"这个主题涵盖了如何有效地将各种jQuery插件和其他前端工具集成到项目中的技术与实践。以下是一些关键的知识点,它们对于理解和实现前端插件的整合至关重要: 1. **jQuery库的理解**:jQuery是一个...

    jquery.scrollLoading图片延迟加载

    通过理解并运用 jQuery.scrollLoading 插件,开发者可以轻松实现图片延迟加载,提升网页性能,为用户提供更流畅的浏览体验。在实际项目中,还可以结合其他前端性能优化策略,如合并CSS和JavaScript,压缩图片,利用...

    前端通过jQuery+插件实现全屏滚动效果.zip

    2. **jQuery插件的使用**:插件通常通过在页面中引入相应的JS文件,并在文档加载完成后调用初始化方法来启用。例如,对于`fullPage.js`,我们需要在HTML中引入插件的JS文件,然后在jQuery的`$(document).ready()`...

    jQuery实现社区化分享插件

    在实现社区化分享插件时,还需注意性能优化,如延迟加载未出现在视口的按钮,避免无谓的网络请求,以及合理使用事件委托减少内存占用。 以上就是使用jQuery实现社区化分享插件的基本步骤和技术要点。通过结合前端...

    jQuery常用插件介绍/收集

    本文将详细介绍一些常用的jQuery插件,并探讨它们在实际项目中的应用。 1. **jQuery UI** jQuery UI 是一个官方的jQuery扩展库,提供了一整套用户界面组件,如日期选择器(DatePicker)、对话框(Dialog)、拖放...

    jquery插件使用方法大全

    jQuery 是一个高效、简洁的JavaScript库,由John Resig...总的来说,jQuery通过提供一系列强大的工具和方法,极大地简化了JavaScript的前端开发,提高了开发效率,同时也降低了代码的复杂性,促进了前端开发的标准化。

    jQuery插件集之(可输入下拉框)N多例子+Demo

    本主题聚焦于一个特定的jQuery插件,即“可输入下拉框”插件,它提供了丰富的功能,如自动完成和模糊查询,极大地提升了用户在网页上的交互体验。 首先,我们要理解什么是“可输入下拉框”。传统的HTML下拉框(`...

    jquery下拉多选复选框插件

    本主题涉及的是一个基于jQuery的下拉多选复选框插件,该插件能够提供用户友好的界面,方便用户在下拉菜单中进行多选操作,尤其适用于后台数据管理或前端交互场景。下面将详细介绍这个插件及其相关的知识点。 1. **...

    前端项目-jquery.lazy.zip

    【前端项目-jquery.lazy.zip】是一个包含前端开发中使用的jQuery延迟加载插件的压缩包。这个插件,名为"Lazy",是专为优化网页性能而设计的,它利用了jQuery库的功能,使得网页能够更高效地处理大量数据或媒体元素的...

    jquery 自动加载下拉框

    总的来说,这个项目展示了如何通过jQuery和自定义插件实现一个功能完善的自动加载下拉框,它结合了前端的动态加载和后端的数据处理,为用户提供了一个高效、友好的交互体验。在实际开发中,这样的组件可以广泛应用于...

    select2(jquery)插件下载

    **jQuery Select2插件详解** Select2是一款基于jQuery的增强型下拉选择框插件,它极大地改进了原生HTML `&lt;select&gt;` 元素的用户体验和功能。标题中的"select2(jquery)插件下载"指的是这个插件的获取途径,通常通过...

    jquery常用插件

    通过深入学习和使用这些jQuery插件,开发者不仅可以提高工作效率,也能更好地理解和掌握jQuery的精髓,从而提升自己的前端开发技能。同时,理解并可能修改这些插件的源码,也是锻炼编程能力和解决问题能力的有效方式...

Global site tag (gtag.js) - Google Analytics