jQuery.imgLazyLoad图片懒加载组件

一、前言

当一个页面中请求的图片过多,而且图片太大,页面访问的速度是非常慢的,对用户的体验非常不友好;使用图片懒加载,可以减轻服务器的压力,增加页面的访问量,这里主要是总结一下我自己写的图片懒加载组件jQuery.imgLazyLoad;使用该组件应在img标签中设置一个imglazyload-src属性,存放图片地址。

二、应用实例demo

/**
 * component: imgLazyLoad 2013/12/12 华子yjh
 * invoking: jQuery.imgLazyLoad(options)
 *
    // 配置对象
    options = {
        container: ‘body‘,              // 外围容器,默认body
        tabItemSelector: ‘‘,            // Tab切换面板选择器
        carouselItemSelector: ‘‘,       // 图片轮播面板选择器
        attrName: ‘imglazyload-src‘     // 图片地址属性
        diff: 300                       // 预加载像素
    }
 *
 */

图片轮播懒加载:http://miiee.taobao.com
Tab切换图片懒加载:http://miiee.taobao.com/main.htm
浏览器滚动图片懒加载:http://miiee.taobao.com/themes/theme_151.htm

三、设计思路

1、处理浏览器下拉滚动

比较 $(window).scrollTop + $(window).height() 与 img.offset().top 的值,当图片在浏览器窗口中,开始加载图片

2、处理Tab切换 与 图片轮播

在处理Tab切换 与 图片轮播,组件提供了一个用于事件处理的函数 handleImgLoad,参数idx:

该参数对于图片轮播,是作为下一轮轮播面板的索引,将下一轮轮播面板中的所有图片预加载
对于Tab切换,则是作为tab项的索引,加载当前显示tab项中的所有图片

3、选择器处理

3.1、滚动下拉选择器的处理

在 配置对象中有一个attrName,是保持图片地址的一个属性 选择器为:img[config.attrName];

其次图片是显示的,如果隐藏,则不加载图片, 选择器为:img[config.attrName]:visible;

再次如果图片已加载,为其加上一个img-loaded的className,为了过滤已加载过的图片,选择器为:img[config.attrName]:visible:not(.img-loaded);

最后如果一个页面使用多次组件,第一次使用时,当配置对象container为body子元素,第二次应该过滤前一次container匹配元素中的图片,
依次类推,选择器为:img[config.attrName]:visible:not(.img-loaded):not(jQuery.imgLazyLoad.selectorCache)

3.2、Tab切换、图片轮播选择器的处理

在 配置对象中有tabItemSelector 或 carouselItemSelector ,结合事件处理函数的参数idx,获取当前Tab项或下一轮轮播面板中的图片
选择器为:tabItemSelector:eq(idx) img 或 carouselItemSelector:eq(idx) img

如果idx === undefined,选择器为:tabItemSelector:visible img 或 carouselItemSelector:eq(0) img
我是根据我自己写的jQuery组件自行判断的

四、组件源码

$.extend({
    imgLazyLoad: function(options) {
        var config = {
                container: ‘body‘,
                tabItemSelector: ‘‘,
                carouselItemSelector: ‘‘,
                attrName: ‘imglazyload-src‘,
                diff: 0
            };
        $.extend( config, options || {} );

        var $container = $(config.container),
            offsetObj = $container.offset(),
            compareH = $(window).height() + $(window).scrollTop(),

            // 判断容器是否为body子元素
            bl = $.contains( document.body, $container.get(0) ),

            // 过滤缓存容器中的图片
            notImgSelector = jQuery.imgLazyLoad.selectorCache ? ‘:not(‘ + jQuery.imgLazyLoad.selectorCache + ‘)‘ : ‘‘,
            imgSelector = ‘img[‘ + config.attrName + ‘]:visible‘ + notImgSelector,
            $filterImgs = $container.find(imgSelector),

            // 用于阻止事件处理
            isStopEventHandle = false,

            // 是否自动懒加载,为true时,绑定滚动事件
            isAutoLazyload = false;

        // 缓存容器为body子元素的图片选择器
        jQuery.imgLazyLoad.selectorCache = bl ? (jQuery.imgLazyLoad.selectorCache ? (jQuery.imgLazyLoad.selectorCache + ‘,‘ + config.container + ‘ img‘) : config.container + ‘ img‘) : jQuery.imgLazyLoad.selectorCache;

        function handleImgLoad(idx) {
            if (isStopEventHandle) {
                return;
            }
            /**
             处理Tab切换,图片轮播,在处理$filterImgs时,没有过滤img:not(.img-loaded),因为只是在一个面板中,
             还有其他面板,如果再次触发,可能$filterImgs.length为0,因此只能在外围容器中判断过滤图片length
            */
            if ($container.find(‘img:not(.img-loaded)‘).length === 0) {
                isStopEventHandle = true;
            }

            var itemSelector = config.tabItemSelector || config.carouselItemSelector || ‘‘;
            if (itemSelector) {
                if (typeof idx !== undefined && idx >= 0) {
                    $filterImgs = $container.find(itemSelector).eq(idx).find(‘img‘);
                }
                else {
                    if (itemSelector === config.carouselItemSelector) {
                        $filterImgs = $container.find(itemSelector).eq(0).find(‘img‘);
                    }
                    else {
                        $filterImgs = $container.find(itemSelector + ‘:visible‘).find(‘img‘);
                    }
                }
            }
            else {
                $filterImgs = $filterImgs.not(‘.img-loaded‘); // 自动懒加载,过滤已加载的图片
                isAutoLazyload = true;
            }

            // 当外围容器位置发生变化,需更新
            offsetObj = $container.offset();

            if ($filterImgs.length > 0) {
                $filterImgs.each(function(idx, elem) {
                    var $target = $(elem),
                        targetTop = $target.offset().top,
                        viewH = $(window).height() + $(window).scrollTop() + config.diff;

                    if (bl) {
                        $target.attr(‘src‘, $target.attr(config.attrName)).removeAttr(config.attrName).addClass(‘img-loaded‘);
                    }
                    // 内容在视窗中
                    if (viewH > targetTop) {
                        $target.attr(‘src‘, $target.attr(config.attrName)).removeAttr(config.attrName).addClass(‘img-loaded‘);
                    }
                });
            }
            else {
                // 处理滚动事件
                isStopEventHandle = true;
                $(window).unbind(‘resize scroll‘, handleImgLoad);
            }
        }

        handleImgLoad();
        if (isAutoLazyload) {
            $(window).bind(‘resize scroll‘, handleImgLoad);
        }

        // 提供事件处理函数
        return {
            handleImgLoad: handleImgLoad
        }
    }
});

// 保存非body子元素容器下的图片选择器
jQuery.imgLazyLoad.selectorCache = ‘‘;

五、实例应用代码

// 轮播图片 懒加载
(function(){
    var imgLazyLoadObj = $.imgLazyLoad({
        container: ‘#first-block-switch‘,
        carouselItemSelector: ‘.switch-content li‘
    });
    $.switchable({
        wrapSelector: ‘#first-block-switch‘,
        contentSelector: ‘.switch-content‘,
        prevBtnSelector: ‘.prev‘,
        nextBtnSelector: ‘.next‘,
        triggerSelector: ‘.switch-nav‘,
        autoPlay: true,
        duration: 300,
        interval: 3000,
        handleImgLoad: imgLazyLoadObj.handleImgLoad
    });
}());

// 浏览器滚动 懒加载
$.imgLazyLoad({ diff: 300 });

时间: 2024-10-24 12:47:04

jQuery.imgLazyLoad图片懒加载组件的相关文章

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

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

jQuery lazyload 图片懒加载实现

现在网站页面内容越来越丰富,图片内容也越来越多,而图片过多会导致网页文件过大,从而引发加载缓慢的问题,而图片懒加载就是为解决这一问题而生. 首先我们来讲Jquery的懒加载控件  jQuery lazyload.JS jQuery lazyload.JS 地址:https://github.com/helijun/helijun/blob/master/plugin/lazyLoad/jquery.lazyload.js  直接复制源码到本地 jQuery lazyload.JS是用 jQuer

jQuery插件图片懒加载lazyload

来自XXX的前言: 什么是ImageLazyLoad技术 在页面上图片比较多的时候,打开一张页面必然引起与服务器大数据量的 交互.尤其是对于高清晰的图片,占的几M的空间.ImageLazyLoad技术就是,当前可见界面的图片是加载进来的,而不可见页面(通过滚动条下拉可 见)中的图片是不加载的,这样势必会引起速度上质的提升. 实现原理: 当图片滚动到可视区时将图片加载进来. 图片不在可视区判断: (一):图片距离页面顶端的高度 大于 窗口可视区的高度+window滚动条的scrollTop. (二

jQuery实现图片懒加载

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" con

基于jquery的图片懒加载js

function lazyload(option){ var settings={ defObj:null, defHeight:0 }; settings=$.extend(settings,option||{}); var defHeight=settings.defHeight,defObj=(typeof settings.defObj=="object")?settings.defObj.find("img"):$(settings.defObj).fin

图片懒加载lazyload

图片懒加载:jquery && jquery-lazyload 图片懒加载是一种前端性能优化方案:随着视图区的滚动,加载剩下的图片,这样当滚动条没有滚动到下面的时候,图片不加载,减少资源浪费 原本:<img src="images/img1.jpg" > 懒加载:<img class="lazy" data-original="images/img1.jpg" > <script type="

前端插件实现图片懒加载

一.echo.js: 我们在开发页面的时候肯定会遇到图片比较多的时候,虽然我们可能有图片分布式的服务器,但是在客户端还是会有很大的性能开销.为了用户体验,特别是对首屏加载速度要求很高的,通常我们会考虑图片延时加载,lazyloading这款插件已经能很好地实现这一功能,可是是基于jQuery,对于移动端可能不太实用.一个非常简单实用叫echo的插件,3k左右特别适合移动端使用.步骤如下: 1.在页面中需要引入echo.css和echo.min.js 2.对需要进行延迟加载的图片采用如下写法: <

jquery 图片懒加载

jquery 图片懒加载 CreationTime--2018年7月1日14点45分 Author:Marydon 1.源码展示 (function(a){a.fn.lazyload=function(b){var c={threshold:0,failure_limit:0,event:"scroll",effect:"show",container:window,skip_invisible:!0};b&&(null!==b.failurelim

前端优化-图片懒加载

一.什么是懒加载 懒加载技术(简称lazyload)是对网页性能优化的一种方案.lazyload的核心是按需加载,避免网页打开时加载过多资源,让用户等待太久,在适当的时候加载用户需要的资源(这里用户需要的资源指该资源呈现在浏览器可视区域).这里我们主要是对img标签使用懒加载技术,使用jquery的query.lazyload.js库实现. 通俗的讲就是:当访问一个页面的时候,先把img元素或是其他元素的背景图片路径替换成一张大小为1*1px图片的路径(这样就只需请求一次),只有当图片出现在浏览