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 相关文章推荐
Spring shiro + bootstrap + jquery.validate 实现登录、注册功能
Jun 02 jQuery
jQuery实现QQ空间汉字转拼音功能示例
Jul 10 jQuery
深入研究jQuery图片懒加载 lazyload.js使用方法
Aug 16 jQuery
自定义类似于jQuery UI Selectable 的Vue指令v-selectable
Aug 23 jQuery
jQuery实现锚点向下平滑滚动特效示例
Aug 29 jQuery
jquery ztree实现右键收藏功能
Nov 20 jQuery
jQuery+CSS实现的table表格行列转置功能示例
Jan 08 jQuery
jQuery实现的页面弹幕效果【测试可用】
Aug 17 jQuery
jQuery解析json格式数据示例
Sep 01 jQuery
JS拖动选择table里的单元格完整实例【基于jQuery】
May 28 jQuery
jquery分页优化操作实例分析
Aug 23 jQuery
jQuery实现鼠标滑动切换图片
May 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匹配UTF-8中文的正则表达式
2015/05/13 PHP
ThinkPHP的常用配置选项汇总
2016/03/24 PHP
PHP微信API接口类
2016/08/22 PHP
php中的buffer缓冲区用法分析
2019/05/31 PHP
innerHTML 和 getElementsByName 在IE下面的bug 的解决
2010/04/09 Javascript
有关DOM元素与事件的3个谜题
2010/11/11 Javascript
Visual Studio中js调试的方法图解
2014/06/30 Javascript
js数值计算时使用parseInt进行数据类型转换(jquery)
2014/10/07 Javascript
JavaScript实现数据类型的相互转换
2016/03/06 Javascript
基于JavaScript实现轮播图代码
2016/07/14 Javascript
微信小程序 图片等比例缩放(图片自适应屏幕)
2016/11/16 Javascript
深入理解Vue-cli搭建项目后的目录结构探秘
2017/07/13 Javascript
js中null与空字符串&quot;&quot;的区别讲解
2019/01/17 Javascript
使用Vue CLI创建typescript项目的方法
2019/08/09 Javascript
Jquery如何使用animation动画效果改变背景色的代码
2020/07/20 jQuery
Python通过poll实现异步IO的方法
2015/06/04 Python
Python自定义主从分布式架构实例分析
2016/09/19 Python
从训练好的tensorflow模型中打印训练变量实例
2020/01/20 Python
浅谈python输出列表元素的所有排列形式
2020/02/26 Python
python删除文件、清空目录的实现方法
2020/09/23 Python
python 爬虫网页登陆的简单实现
2020/11/30 Python
HTML5 在canvas中绘制文本附效果图
2014/06/23 HTML / CSS
美国高端医师级美容产品电商:BeautifiedYou.com
2017/04/17 全球购物
环境科学专业研究生求职信
2013/10/02 职场文书
业务员岗位职责
2013/11/16 职场文书
2014年大学生自我评价
2014/01/19 职场文书
护理专业自我鉴定
2014/01/30 职场文书
幼儿园毕业家长感言
2014/02/10 职场文书
党支部书记岗位职责
2015/02/15 职场文书
小学感恩主题班会
2015/08/12 职场文书
高三数学教学反思
2016/02/18 职场文书
高中16字霸气押韵班级口号集锦!
2019/06/27 职场文书
go xorm框架的使用
2021/05/22 Golang
SQL Server2019安装的详细步骤实战记录(亲测可用)
2022/06/10 SQL Server
一文解答什么是MySQL的回表
2022/08/05 MySQL
SQL Server数据库的三种创建方法汇总
2023/05/08 MySQL