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 ajaxupload插件实现无刷新上传文件
Apr 23 jQuery
jquery.guide.js新版上线操作向导镂空提示jQuery插件(推荐)
May 20 jQuery
jquery实现一个全局计时器(商城可用)
Jun 30 jQuery
jQuery实现弹窗下底部页面禁止滑动效果
Dec 19 jQuery
jQuery实现图片简单轮播功能示例
Aug 13 jQuery
jQuery实现的中英文切换功能示例
Jan 11 jQuery
通过JQuery,JQueryUI和Jsplumb实现拖拽模块
Jun 18 jQuery
jquery实现垂直无限轮播的方法分析
Jul 16 jQuery
jQuery实现input[type=file]多图预览上传删除等功能
Aug 02 jQuery
jQuery 筛选器简单操作示例
Oct 02 jQuery
jQuery利用cookie 实现本地收藏功能(不重复无需多次命名)
Nov 07 jQuery
jQuery实现飞机大战小游戏
Jul 05 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
使用php4加速网络传输
2006/10/09 PHP
php为什么选mysql作为数据库? Mysql 创建用户方法
2007/07/02 PHP
phpExcel中文帮助手册之常用功能指南
2014/08/18 PHP
跟我学Laravel之配置Laravel
2014/10/15 PHP
PHPExcel简单读取excel文件示例
2016/05/26 PHP
ThinkPHP中session函数详解
2016/09/14 PHP
PHP中的日期时间处理利器实例(Carbon)
2017/06/09 PHP
一个tab标签切换效果代码
2009/03/27 Javascript
JavaScript学习点滴 call、apply的区别
2010/10/22 Javascript
Jquery实现点击切换图片并隐藏显示内容(2种方法实现)
2013/04/11 Javascript
基于jQuery+PHP+Mysql实现在线拍照和在线浏览照片
2015/09/06 Javascript
利用n 升级工具升级Node.js版本及在mac环境下的坑
2017/02/15 Javascript
详解react-router 4.0 下服务器如何配合BrowserRouter
2017/12/29 Javascript
详解vue中点击空白处隐藏div的实现(用指令实现)
2018/04/19 Javascript
js中事件对象和事件委托的介绍
2019/01/21 Javascript
js实现web调用摄像头 js截取视频画面
2019/04/21 Javascript
[00:48]食人魔魔法师至宝“金鹏之幸”全新模型和自定义特效展示
2019/12/19 DOTA
python使用ctypes模块调用windowsapi获取系统版本示例
2014/04/17 Python
python将文本中的空格替换为换行的方法
2018/03/19 Python
Python实现的质因式分解算法示例
2018/05/03 Python
在Mac下使用python实现简单的目录树展示方法
2018/11/01 Python
python循环输出三角形图案的例子
2019/11/22 Python
tensorflow 模型权重导出实例
2020/01/24 Python
Python unittest装饰器实现原理及代码
2020/09/08 Python
PIP和conda 更换国内安装源的方法步骤
2020/09/21 Python
Python环境使用OpenCV检测人脸实现教程
2020/10/19 Python
GNC健安喜官方海外旗舰店:美国著名保健品牌
2017/01/04 全球购物
linux面试题参考答案(6)
2016/06/23 面试题
remote接口和home接口主要作用
2013/05/15 面试题
小学数学课题方案
2014/06/15 职场文书
国庆横幅标语
2014/10/08 职场文书
教师节横幅标语
2014/10/08 职场文书
2015纪念九一八事变84周年演讲稿
2015/03/19 职场文书
师范生教育见习总结
2015/06/23 职场文书
2019年大学生职业生涯规划书最新范文
2019/03/25 职场文书
Vue+TypeScript中处理computed方式
2022/04/02 Vue.js