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 validata插件实现方法
Jun 25 jQuery
jquery插件开发之选项卡制作详解
Aug 30 jQuery
jQuery实现的鼠标滚轮控制图片缩放功能实例
Oct 14 jQuery
jQuery实现左右滑动的toggle方法
Mar 03 jQuery
关于jquery layui弹出层的使用方法
Apr 21 jQuery
jQuery实现每隔一段时间自动更换样式的方法分析
May 03 jQuery
jQuery实现点击旋转,再点击恢复初始状态动画效果示例
Dec 11 jQuery
jquery层次选择器的介绍
Jan 18 jQuery
jQuery移动端跑马灯抽奖特效升级版(抽奖概率固定)实现方法
Jan 18 jQuery
jquery登录的异步验证操作示例
May 09 jQuery
jquery图片预览插件实现方法详解
Jul 18 jQuery
jQuery实现鼠标拖动图片功能
Mar 04 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 adodb操作mysql数据库
2009/03/19 PHP
PHP数组实例总结与说明
2011/08/23 PHP
Thinkphp自定义生成缩略图尺寸的方法
2019/08/05 PHP
php 实现简单的登录功能示例【基于thinkPHP框架】
2019/12/02 PHP
jQuery Ajax 全解析
2009/02/08 Javascript
javascript中match函数的用法小结
2014/02/08 Javascript
js字符串日期yyyy-MM-dd转化为date示例代码
2014/03/06 Javascript
自己使用jquery写的一个无缝滚动的插件
2014/04/30 Javascript
Jquery 实现checkbox全选方法
2015/01/28 Javascript
理解javascript中的MVC模式
2016/01/28 Javascript
深入浅析JavaScript面向对象和原型函数
2016/02/06 Javascript
浅析Bootstrap组件之面板组件
2016/05/04 Javascript
基于JQuery和原生JavaScript实现网页定位导航特效
2017/04/03 jQuery
Vue如何实现响应式系统
2018/07/11 Javascript
JavaScript实现的滚动公告特效【基于jQuery】
2019/07/10 jQuery
ionic+html5+API实现双击返回键退出应用
2019/09/17 Javascript
[01:13]这,就是刀塔
2014/07/16 DOTA
详解详解Python中writelines()方法的使用
2015/05/25 Python
Python模块搜索概念介绍及模块安装方法介绍
2015/06/03 Python
浅谈Python爬取网页的编码处理
2016/11/04 Python
Python Json序列化与反序列化的示例
2018/01/31 Python
python读取指定字节长度的文本方法
2019/08/27 Python
Python 过滤错误log并导出的实例
2019/12/26 Python
使用简单的CSS3属性实现炫酷读者墙效果
2014/01/08 HTML / CSS
CSS3实现多重边框的方法总结
2016/05/31 HTML / CSS
canvas探照灯效果的示例代码
2018/11/30 HTML / CSS
民族团结先进个人材料
2014/02/05 职场文书
小学生检讨书大全
2014/02/06 职场文书
家长会主持词开场白
2014/03/18 职场文书
团日活动总结
2014/04/28 职场文书
小学安全工作汇报材料
2014/08/19 职场文书
个人股份转让协议书范本
2014/10/26 职场文书
2015大学生实训报告
2014/11/05 职场文书
爱护环境建议书
2015/09/14 职场文书
创业者如何撰写出一份打动投资人的商业计划书?
2019/07/02 职场文书
Windows Server 2019 配置远程控制以及管理方法
2022/04/28 Servers