jquery实现异步加载图片(懒加载图片一种方式)

 更新时间:2017年04月24日 10:45:00   作者:专注前端30年  
本篇文章主要介绍了jquery实现异步加载(懒加载图片一种方式),具有一定的参考价值,感兴趣的小伙伴们可以参考一下。

首先将插件在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链接同一个图片,这样网页就加载快好多,这个时候再异步的加载要加载的图片,也就现在要说的功能)

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

  • ajax在兼容模式下失效的快速解决方法

    ajax在兼容模式下失效的快速解决方法

    下面小编就为大家带来一篇ajax在兼容模式下失效的快速解决方法。小编觉得挺不错的。现在分享给大家,给大家一个参考
    2016-03-03
  • 关于JQuery($.load)事件的用法和分析

    关于JQuery($.load)事件的用法和分析

    本篇文章小编为大家介绍,关于JQuery($.load)事件的用法与分析,有需要的朋友可以关注一下
    2013-04-04
  • 基于JQuery的Pager分页器实现代码

    基于JQuery的Pager分页器实现代码

    页面分页对于程序员来说最熟悉不过,在WEB开发中经常需要对页面进行分页,jQuery插件JQuery Pager分页器能轻松实现javascript分页功能,只需要几行代码,javascript分页简单搞定。
    2010-07-07
  • jQuery实现的文字逐行向上间歇滚动效果示例

    jQuery实现的文字逐行向上间歇滚动效果示例

    这篇文章主要介绍了jQuery实现的文字逐行向上间歇滚动效果,涉及jQuery基于时间函数的页面元素样式动态变换相关操作技巧,需要的朋友可以参考下
    2017-09-09
  • 懒加载实现的分页&&网站footer自适应

    懒加载实现的分页&&网站footer自适应

    本文主要介绍了wap手机端懒加载分页,web电脑端懒加载分页以及web电脑端footer底部固定。具有很好的参考价值,下面就跟着小编一起来看下吧
    2016-12-12
  • jquery判断输入密码两次是否相等

    jquery判断输入密码两次是否相等

    这篇文章分别介绍了Jquery框架easyui判断输入密码两次是否相等,以及使用jQuery.validate验证表单中两次密码是否一致的问题,需要的朋友可以参考下
    2015-12-12
  • jQuery插件bxSlider实现响应式焦点图

    jQuery插件bxSlider实现响应式焦点图

    bxSlider特性1.充分响应各种设备,适应各种屏幕;2.支持多种滑动模式,水平、垂直以及淡入淡出效果;3.支持图片、视频以及任意html内容;4.支持触摸滑动;5.支持Firefox,Chrome,Safari,iOS,Android,IE7+,下面我们就来详细探讨下吧。
    2015-04-04
  • jquery实现横向图片轮播特效代码分享

    jquery实现横向图片轮播特效代码分享

    这篇文章主要介绍了jquery实现横向图片轮播特效代码,效果很精致,实现方法很简单,特推荐给大家,希望大家可以喜欢。
    2015-11-11
  • jQuery中each和js中forEach的区别分析

    jQuery中each和js中forEach的区别分析

    这篇文章主要介绍了jQuery中each和js中forEach的区别,结合实例形式较为详细的分析了jQuery中each和js中forEach针对数组与对象遍历的相关操作技巧与注意事项,需要的朋友可以参考下
    2019-02-02
  • JQuery 获得绝对,相对位置的坐标方法

    JQuery 获得绝对,相对位置的坐标方法

    获取页面某一元素的绝对X,Y坐标,可以用offset()方法:(body属性设置margin :0;padding:0;)
    2010-02-02

最新评论