zoukankan      html  css  js  c++  java
  • 图片延迟加载jquery插件imgLazyLoading

    实现了图片延迟加载功能,插件代码非常简洁,且每个功能都把注释写得非常详细,适合网友们学习,好好利用哦

    引入图片延迟加载Jquery插件文件后,页面使用代码如下:

    <script type="text/javascript" charset="utf-8">
        $(".lazyLoading").imgLazyLoading({
            // 记录图片真实地址的属性名
            url : "data-url",
            // 图片渐出效果以及渐出时间
            fadeIn : 400
        });
    </script>

    JS插件代码:

    /**======================================
    * 名称:imgLazyLoading
    * 描述:基于jQuery的图片延迟加载插件
    * 版本:1.0.1
    * 日期:2013-6-18
    * 兼容:在火狐,IE6-10,谷歌,360测试OK
    * 来源:
    使用方式:
    <script type="text/javascript" charset="utf-8">
        $(".lazyLoading").imgLazyLoading({
            // 记录图片真实地址的属性名
            url : "data-url",
            // 图片渐出效果以及渐出时间
            fadeIn : 400
        });
    </script>
    如果用户禁用了JS解决方案
    <noscript><img src="" /></noscript>
    这是目前最简单和最有效的解决js在禁用
    的情况下依然显示图片
    =======================================**/
    
    //定义匿名函数并立即执行
    (function($){
    
        $.fn.imgLazyLoading = function(options)
        {
            //定义需要的参数的初始值,合并options对象然后赋值到变量set,如果存在相同的值那么进行覆盖
            var init = $.extend({url:"data-url",fadeIn:0},options || {});
            var cache = [];
    
            //为所有指定class="lazyloading"的元素执行这个匿名函数
            $(this).each(function()
            {
                var nodeName = this.nodeName.toLowerCase();//返回节点的名称,并且转换为小写
                var url = $(this).attr(init.url);//获取options参数的值
                //获取每个元素的信息,存入临时对象data里面,然后插入到cache对象
                var data = {
                    obj : $(this),//当前选中的元素
                    url : url,//图片指向地址
                    tag : nodeName//节点的名字
                }
                cache.push(data);//向cache数组的末尾添加元素,并返回新的长度
            });
    
            var lazyLoading = function()
            {
                //用each函数遍历cache数组
                $.each(cache,function(key, val)
                {
                    var obj = val.obj;
                    var url = val.url;
                    var tag = val.tag;
                    if(obj)
                    {
                        var winHeight = $(window).height();//当前窗口高度
                        var scrolltop = $(window).scrollTop();//滚动条偏移高度
                        var imgTop = obj.offset().top;//图片元素在当前视口的相对偏移
                        //判断是否在当前窗口内
                        if((imgTop-scrolltop) > 0 && (imgTop-scrolltop) < winHeight)
                        {
                            if(tag === "img")
                            {
                                if(init.fadeIn)
                                {
                                    //渐出效果
                                    obj.fadeIn(init.fadeIn);
                                }
                                //给src属性赋值
                                obj.attr("src", url);
                            }
                            else
                            {
                                return false;
                            }
                            val.obj = null;//清空,不清空会重复负责,重复请求
                        }
                    }
                });
            }
            //加载后立即执行
            lazyLoading();
            //添加滚动事件
            $(window).bind("scroll",lazyLoading);
        };
    })(jQuery);
    JS

    HTML代码:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
    <title>网友猎人分享原创图片延迟加载jquery插件</title>
        <script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
        <script>
            window.jQuery || document.write('<script src="js/jquery-1.11.0.min.js" type="text/javascript"></script>')
        </script>
    <script type="text/javascript" src="imglazyloading.js"></script>
    </head>
    <body>
        <div style="height:800px;700px; text-align:center; font-size:20px; font-weight:bold; margin:30px auto; color:#FF0000;">鼠标往下滚动就可以看到效果啦</div>
        <img  data-url="images/11235MW1-4.jpg" class="lazyLoading"/>
        <img  data-url="images/11235L447-3.jpg" class="lazyLoading"/>
        <img  data-url="images/11235L305-1.jpg" class="lazyLoading"/>
        <img  data-url="images/11235K258-0.jpg" class="lazyLoading"/>
        <script type="text/javascript" charset="utf-8">
        $(".lazyLoading").imgLazyLoading({
            // 记录图片真实地址的属性名
            url : "data-url",
            // 图片渐出效果以及渐出时间
            fadeIn : 4000
        });
    </script>
    </body>
    </html>
    HTML

    转自:http://www.jq----school.com/Detail.aspx?id=282

  • 相关阅读:
    Oracle完全卸载
    Oracle数据库(64位) 及 PLSQL(64位)的组合安装【第一篇】
    Yii2 配置yii2redis扩展
    php 获取每个汉字的拼音首字母
    linux 安装memcacheq
    php在linux中执行外部命令
    比较两个日期的时间差精确到秒
    mysql 的 备份与还原
    php类中__get和__set的用法
    yii2.0 安装
  • 原文地址:https://www.cnblogs.com/laneyfu/p/4347289.html
Copyright © 2011-2022 走看看