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轻松实现无缝轮播效果
Mar 22 jQuery
jquery中关于bind()方法的使用技巧分享
Mar 30 jQuery
jQuery使用unlock.js插件实现滑动解锁
Apr 04 jQuery
jQuery导航条固定定位效果实例代码
May 26 jQuery
jQuery层级选择器_动力节点节点Java学院整理
Jul 04 jQuery
JavaScript实现离开页面前提示功能【附jQuery实现方法】
Sep 26 jQuery
使用JQuery实现图片轮播效果的实例(推荐)
Oct 24 jQuery
JQuery通过后台获取数据遍历到前台的方法
Aug 13 jQuery
jQuery解析json格式数据示例
Sep 01 jQuery
Jquery和CSS实现选择框重置按钮功能
Nov 08 jQuery
jquery实现两个div中的元素相互拖动的方法分析
Apr 05 jQuery
JQuery实现折叠式菜单的详细代码
Jun 03 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
set_include_path和get_include_path使用及注意事项
2013/02/02 PHP
Fatal error: session_start(): Failed to initialize storage module: files问题解决方法
2014/05/04 PHP
php调用新浪短链接API的方法
2014/11/08 PHP
Laravel源码解析之路由的使用和示例详解
2018/09/27 PHP
PHP随机生成中文段落示例【测试网站内容时使用】
2020/04/26 PHP
收集的10个免费的jQuery相册
2011/02/26 Javascript
关于img的href和src取变量及赋值的方法
2014/04/28 Javascript
node.js中的path.join方法使用说明
2014/12/08 Javascript
js超时调用setTimeout和间歇调用setInterval实例分析
2015/01/28 Javascript
js实现简单的左右两边固定广告效果实例
2015/04/10 Javascript
简单对比分析JavaScript中的apply,call与this的使用
2015/12/04 Javascript
浅谈React 属性和状态的一些总结
2016/11/21 Javascript
js仿小米手机上下滑动效果
2017/02/05 Javascript
如何理解Vue的.sync修饰符的使用
2017/08/17 Javascript
react router 4.0以上的路由应用详解
2017/09/21 Javascript
Vue框架里使用Swiper的方法示例
2018/09/20 Javascript
Vue Cli 3项目使用融云IM实现聊天功能的方法
2019/04/19 Javascript
亲自动手实现vue日历控件
2019/06/26 Javascript
vue中watch的用法汇总
2020/12/28 Vue.js
python使用scrapy发送post请求的坑
2018/09/04 Python
Python给定一个句子倒序输出单词以及字母的方法
2018/12/20 Python
python 获取utc时间转化为本地时间的方法
2018/12/31 Python
python gdal安装与简单使用
2019/08/01 Python
django drf框架自带的路由及最简化的视图
2019/09/10 Python
基于Python批量生成指定尺寸缩略图代码实例
2019/11/20 Python
Python基于模块Paramiko实现SSHv2协议
2020/04/28 Python
python软件都是免费的吗
2020/06/18 Python
python用Configobj模块读取配置文件
2020/09/26 Python
python import 上级目录的导入
2020/11/03 Python
英国标志性奢侈品牌:Burberry
2016/07/28 全球购物
独特的礼品和创新的科技产品:The Grommet
2018/02/24 全球购物
英国派对礼服和连衣裙购物网站:TFNC London
2018/07/07 全球购物
德国家具购物网站:Möbel Höffner
2019/08/26 全球购物
希特勒经典演讲稿
2014/05/19 职场文书
领导班子整改方案
2014/10/25 职场文书
Python面向对象编程之类的概念
2021/11/01 Python