jquery实现异步加载图片(懒加载图片一种方式)


Posted in jQuery onApril 24, 2017

首先将插件在jq后面引入

(function($) { 
        // alert($.fn.scrollLoading); 
        $.fn.scrollLoading = function(options) { 
          var defaults = { 
            attr: "data-url" 
          }; 
          var params = $.extend({}, defaults, options || {}); 
          params.cache = []; 
          $(this).each(function() { 
            var node = this.nodeName.toLowerCase(), 
              url = $(this).attr(params["attr"]); 
            if(!url) { 
              return; 
            } 
            var data = { 
              obj: $(this), 
              tag: node, 
              url: url 
            }; 
            params.cache.push(data); 
          }); 
 
          var loading = function() { 
            var st = $(window).scrollTop(), 
              sth = st + $(window).height(); 
            $.each(params.cache, function(i, data) { 
              var o = data.obj, 
                tag = data.tag, 
                url = data.url; 
              if(o) { 
                post = o.position().top; 
                posb = post + o.height(); 
                if((post > st && post < sth) || (posb > st && posb < sth)) { 
                  if(tag === "img") { 
                    o.attr("src", url); 
                  } else { 
                    o.load(url); 
                  } 
                  data.obj = null; 
                } 
              } 
            }); 
            return false; 
          }; 
 
          loading(); 
          $(window).bind("scroll", loading); 
        }; 
      })(jQuery);

然后在底部初始化

$(document).ready(function () { 
    //实现图片慢慢浮现出来的效果 
    $("img").load(function () { 
      //图片默认隐藏  
      $(this).hide(); 
      //使用fadeIn特效  
      $(this).fadeIn("5000"); 
    }); 
    // 异步加载图片,实现逐屏加载图片 
    $(".scrollLoading").scrollLoading();  
  });

需要修改img标签为

<img class="scrollLoading" data-url="image/logo.jpg" src="images/load.gif" />

data-url表示将要异步加载的图片,src表示首先加载的图片(一般会是小图片,或者是一个动画,网页中全部的src链接同一个图片,这样网页就加载快好多,这个时候再异步的加载要加载的图片,也就现在要说的功能)

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
jquery中关于bind()方法的使用技巧分享
Mar 30 jQuery
jQuery实现多张图片上传预览(不经过后端处理)
Apr 29 jQuery
jQuery中clone()函数实现表单中增加和减少输入项
May 13 jQuery
jQuery 实现左右两侧菜单添加、移除功能
Jan 02 jQuery
JQuery通过后台获取数据遍历到前台的方法
Aug 13 jQuery
jQuery动态操作表单示例【基于table表格】
Dec 06 jQuery
jQuery判断自定义属性data-val用法示例
Jan 07 jQuery
jQuery子选择器与可见性选择器实例分析
Jun 28 jQuery
jQuery位置选择器用法实例分析
Jun 28 jQuery
jQuery 选择方法及$(this)用法实例分析
May 19 jQuery
jQuery 选择器用法实例分析【prev + next】
May 22 jQuery
jQuery实现简单QQ聊天框
Aug 27 jQuery
使用jQuery ajaxupload插件实现无刷新上传文件
Apr 23 #jQuery
jQuery实现百度登录框的动态切换效果
Apr 21 #jQuery
推荐三款日期选择插件(My97DatePicker、jquery.datepicker、Mobiscroll)
Apr 21 #jQuery
jquery中$.fn和图片滚动效果实现的必备知识总结
Apr 21 #jQuery
jQuery+pjax简单示例汇总
Apr 21 #jQuery
基于jQuery实现文字打印动态效果
Apr 21 #jQuery
jQuery插件FusionCharts绘制的3D双柱状图效果示例【附demo源码】
Apr 20 #jQuery
You might like
浅析PHP原理之变量(Variables inside PHP)
2013/08/09 PHP
php中实现精确设置session过期时间的方法
2014/07/17 PHP
php实现的RSS生成类实例
2015/04/23 PHP
PHP 读取大文件并显示的简单实例(推荐)
2016/08/12 PHP
js获取location.href的参数实例代码
2013/08/02 Javascript
javascript中数组方法汇总
2015/07/07 Javascript
实例详解jQuery表单验证插件validate
2016/01/18 Javascript
纯前端JavaScript实现Excel IO案例分享
2016/08/26 Javascript
js中string和number类型互转换技巧(分享)
2016/11/28 Javascript
JQuery validate 验证一个单独的表单元素实例
2017/02/17 Javascript
如何在AngularJs中调用第三方插件库
2017/05/21 Javascript
jquery实现用户登陆界面(示例讲解)
2017/09/06 jQuery
微信小程序自定义单项选择器样式
2019/07/25 Javascript
全面解析Python的While循环语句的使用方法
2015/10/13 Python
Python语言描述KNN算法与Kd树
2017/12/13 Python
Python cookbook(数据结构与算法)实现对不原生支持比较操作的对象排序算法示例
2018/03/15 Python
Python封装原理与实现方法详解
2018/08/28 Python
解决Python一行输出不显示的问题
2018/12/03 Python
python3光学字符识别模块tesserocr与pytesseract的使用详解
2020/02/26 Python
matlab中imadjust函数的作用及应用举例
2020/02/27 Python
关于python 跨域处理方式详解
2020/03/28 Python
Python tkinter界面实现历史天气查询的示例代码
2020/08/23 Python
Python importlib模块重载使用方法详解
2020/10/13 Python
Python requests HTTP验证登录实现流程
2020/11/05 Python
全面介绍python中很常用的单元测试框架unitest
2020/12/14 Python
Python的logging模块基本用法
2020/12/24 Python
什么是serialVersionUID
2016/03/04 面试题
介绍一下grep命令的使用
2012/06/28 面试题
幼儿园长自我鉴定
2013/10/17 职场文书
《钱学森》听课反思
2014/03/01 职场文书
学习决心书范文
2014/03/11 职场文书
医生党的群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
教师党的群众路线学习心得体会
2014/11/04 职场文书
布达拉宫的导游词
2015/02/02 职场文书
诉讼和解协议书
2016/03/23 职场文书
Django实现翻页的示例代码
2021/05/24 Python