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+ThinkPHP+Ajax实现即时消息提醒功能实例代码
Mar 21 jQuery
为JQuery EasyUI 表单组件增加焦点切换功能的方法
Apr 13 jQuery
jquery+css实现简单的图片轮播效果
Aug 07 jQuery
jQuery实现简单日期格式化功能示例
Sep 19 jQuery
jQuery实现动态显示select下拉列表数据的方法
Feb 05 jQuery
jquery点击回车键实现登录效果并默认焦点的方法
Mar 09 jQuery
通过jquery toggleClass()属性制作文章段落更改背景颜色
May 21 jQuery
20个最常见的jQuery面试问题及答案
May 23 jQuery
jquery实现的简单轮播图功能【适合新手】
Aug 17 jQuery
vue-cli 引入jQuery,Bootstrap,popper的方法
Sep 03 jQuery
jquery实现掷骰子小游戏
Oct 24 jQuery
jQuery实时统计输入框字数及限制
Jun 24 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
一个oracle+PHP的查询的例子
2006/10/09 PHP
PHP 和 MySQL 开发的 8 个技巧
2006/10/09 PHP
BBS(php &amp; mysql)完整版(二)
2006/10/09 PHP
php开发工具之vs2005图解
2008/01/12 PHP
linux下为php添加curl扩展的方法
2011/07/29 PHP
php rmdir使用递归函数删除非空目录实例详解
2016/10/20 PHP
js获取div高度的代码
2008/08/09 Javascript
Javascript在IE和FireFox中的不同表现简析
2012/12/03 Javascript
jquery获得option的值和对option进行操作
2013/12/13 Javascript
JS获取几种URL地址的方法小结
2014/02/26 Javascript
javascript版的in_array函数(判断数组中是否存在特定值)
2014/05/09 Javascript
轻松创建nodejs服务器(8):非阻塞是如何实现的
2014/12/18 NodeJs
Node.js发送HTTP客户端请求并显示响应结果的方法示例
2017/04/12 Javascript
详解如何在NodeJS项目中优雅的使用ES6
2017/04/22 NodeJs
AngularJS入门教程二:在路由中传递参数的方法分析
2017/05/27 Javascript
详解ES6之async+await 同步/异步方案
2017/09/19 Javascript
Angular父组件调用子组件的方法
2018/04/02 Javascript
WebPack配置vue多页面的技巧
2018/05/15 Javascript
深入Node TCP模块的理解
2019/03/13 Javascript
vue-cli 3.x配置跨域代理的实现方法
2019/04/12 Javascript
如何利用JavaScript编写一个格斗小游戏
2021/01/06 Javascript
约瑟夫问题的Python和C++求解方法
2015/08/20 Python
python计算两个数的百分比方法
2018/06/29 Python
python调用tcpdump抓包过滤的方法
2018/07/18 Python
对python多线程与global变量详解
2018/11/09 Python
python  文件的基本操作 菜中菜功能的实例代码
2019/07/17 Python
python 使用socket传输图片视频等文件的实现方式
2019/08/07 Python
Python 获取项目根路径的代码
2019/09/27 Python
python 图像判断,清晰度(明暗),彩色与黑白实例
2020/06/04 Python
Python带参数的装饰器运行原理解析
2020/06/09 Python
HTML5中的进度条progress元素简介及兼容性处理
2016/06/02 HTML / CSS
外科实习自我鉴定
2013/10/06 职场文书
个人简历自我评价八例
2013/10/31 职场文书
室内设计专业个人的自我评价
2013/12/18 职场文书
村级换届选举方案
2014/05/10 职场文书
素质教育培训心得体会
2016/01/19 职场文书