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 相关文章推荐
原生Aajax 和jQuery Ajax 写法个人总结
Mar 24 jQuery
jQuery实现多张图片上传预览(不经过后端处理)
Apr 29 jQuery
jQuery实现frame之间互通的方法
Jun 26 jQuery
基于jQuery Easyui实现登陆框界面
Jul 10 jQuery
jQuery实现的文字逐行向上间歇滚动效果示例
Sep 06 jQuery
jQuery实现checkbox的简单操作
Nov 18 jQuery
基于jQuery使用Ajax动态执行模糊查询功能
Jul 05 jQuery
jQuery实现table表格信息的展开和缩小功能示例
Jul 21 jQuery
一文快速了解JQuery中的AJAX
May 31 jQuery
使用jQuery实现掷骰子游戏
Oct 24 jQuery
JQuery常用简单动画操作方法回顾与总结
Dec 07 jQuery
jQuery实现图片切换效果
Oct 19 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生成二维码的几种方式整理及使用实例
2013/06/03 PHP
Yii框架参数化查询中IN查询只能查询一个的解决方法
2017/05/20 PHP
PHP实现的堆排序算法详解
2017/08/17 PHP
PHP7如何开启Opcode打造强悍性能详解
2018/05/11 PHP
运用Windows XP附带的Msicuu.exe、Msizap.exe来彻底卸载顽固程序
2007/04/21 Javascript
excel操作之Add Data to a Spreadsheet Cell
2007/06/12 Javascript
js 实现复制到粘贴板的功能代码
2010/05/13 Javascript
ASP 过滤数组重复数据函数(加强版)
2010/05/31 Javascript
为JavaScript提供睡眠功能(sleep) 自编译JS引擎
2010/08/16 Javascript
instanceof和typeof运算符的区别详解
2014/01/06 Javascript
JavaScript实现给定时间相加天数的方法
2016/01/25 Javascript
bootstrap modal弹出框的垂直居中
2016/12/14 Javascript
如何提高数据访问速度
2016/12/26 Javascript
H5上传本地图片并预览功能
2017/05/08 Javascript
JavaScript对象_动力节点Java学院整理
2017/06/23 Javascript
Node.js爬取豆瓣数据实例分析
2018/03/05 Javascript
vue+moment实现倒计时效果
2019/08/26 Javascript
layui table 多行删除(id获取)的方法
2019/09/12 Javascript
JavaScript实现文件下载并重命名代码实例
2019/12/12 Javascript
浅谈element中InfiniteScroll按需引入的一点注意事项
2020/06/05 Javascript
[38:38]完美世界DOTA2联赛PWL S3 access vs Rebirth 第二场 12.17
2020/12/18 DOTA
Python使用代理抓取网站图片(多线程)
2014/03/14 Python
举例讲解Python中装饰器的用法
2015/04/27 Python
Python Requests安装与简单运用
2016/04/07 Python
python实现在遍历列表时,直接对dict元素增加字段的方法
2019/01/15 Python
在 Python 中接管键盘中断信号的实现方法
2020/02/04 Python
如何解决flask修改静态资源后缓存文件不能及时更改问题
2020/08/02 Python
h5网页水印SDK的实现代码示例
2019/02/19 HTML / CSS
PHP开发的一般流程
2013/08/13 面试题
金蝶的一道SQL笔试题
2012/12/18 面试题
校运会广播稿100字
2014/01/27 职场文书
学生会竞聘书范文
2014/03/31 职场文书
2015年城管个人工作总结
2015/05/15 职场文书
为什么 Nginx 比 Apache 更牛逼
2021/03/31 Servers
python3.9之你应该知道的新特性详解
2021/04/29 Python
Linux安装Docker详细教程
2022/07/07 Servers