picLazyLoad 图片延时加载,包含背景图片

时间:2021-11-26 13:22:37
 /**
* picLazyLoad 图片延时加载,包含背景图片
* $(img).picLazyLoad({...})
* data-original 预加载图片地址
* alon
*/
;(function($){
$.fn.imgLazyLoad = function(settings){
var $this = $(this),
_winScrollTop = 0,
_winHeight = $(window).height();
settings = $.extend({
threshold: 0, // 提前高度加载
placeholder: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC',
callback:function(){}
}, settings||{});
// 执行懒加载图片
lazyLoadPic();
// 滚动触发换图
$(window).on('scroll',function(){
_winScrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;
lazyLoadPic();
});
// 懒加载图片
function lazyLoadPic(){
$this.each(function(){
var $self = $(this);
if($self.is('img')){
if($self.attr('data-original')){
var _offsetTop = $self.offset().top;
if((_offsetTop - settings.threshold) <= (_winHeight + _winScrollTop)){
$self.attr('src',$self.attr('data-original'));
$self.removeAttr('data-original');
$self.removeClass('loadH');
settings.callback($self);
}
}
}else{
if($self.attr('data-original')){// 默认占位图片
if($self.css('background-image') == 'none'){
$self.css('background-image','url('+settings.placeholder+')');
}
var _offsetTop = $self.offset().top;
if((_offsetTop - settings.threshold) <= (_winHeight + _winScrollTop)){
$self.css('background-image','url('+$self.attr('data-original')+')');
$self.removeAttr('data-original');
settings.callback($self);
}
}
}
});
}
}
})(Zepto);
调用

1 $('img').imgLazyLoad({callback:function(data){

 })

picLazyLoad 图片延时加载,包含背景图片的更多相关文章

  1. 图片延时加载原理 和 使用jquery实现的一个图片延迟加载插件(含图片延迟加载原理)

    图片加载技术分为:图片预加载和图片延时加载. javascript图片预加载和延时加载的区别主要体现在图片传输到客户端的时机上,都是为了提升用户体验的,延时加载又叫懒加载.两种技术的本质:两者的行为是 ...

  2. 图片延时加载jquery&period;inview&period;js用法详解

    我们在网站上总能见到这样的效果,若是有图片,图片都是先用loading加载一小段时间,然后紧接着出来要显示的图片,即效果如下: v2_loading.gif,几秒钟时间过渡到v2_pic_01_s.j ...

  3. 一段实现页面上的图片延时加载的js

    大家如果使用firebug去查看的话就会发现,当你滚动到相应的行时,当前行的图片才即时加载的,这样子的话页面在打开只加可视区域的图片,而其它隐藏的图片则不加载,一定程序上加快了页面加载的速度,对于比较 ...

  4. js实现网页图片延时加载的原理和代码 提高网站打开速度

    有时我们看到一些大型网站,页面如果有很多图片的时候,当你滚动到相应的行时,当前行的图片才即时加载的,这样子的话页面在打开只加可视区域的图片,而其它隐藏的图片则不加载,一定程序上加快了页面加载的速度,对 ...

  5. Ionic 图片延时加载

    图片的延时加载是为了提供App的运行效率,那么是如何实现的呢?献上github:  https://github.com/paveisistemas/ionic-image-lazy-load 1.下 ...

  6. js实现图片延时加载的原理

    实现原理: 附:(http://www.cnblogs.com/fishtreeyu/archive/2011/03/12/1982067.html) 把所有需要延时加载的图片改成如下的格式: &lt ...

  7. &lbrack;转载&rsqb;jQuery&period;lazyload详解 - 图片延时加载

    jQuery实现图片延迟加载,不知道是否可以节省带宽呢?有人知道吗? 这究竟只是一个视觉特效还是真的能延迟加载减少服务器的请求呢? <script type="text/javascr ...

  8. jquery插件图片延时加载实例详解

    效果预览:http://keleyi.com/keleyi/phtml/image/index.htm 使用方法:1.导入JS插件 <script src="http://keleyi ...

  9. dataset的使用和图片延时加载的实现

    首先,先介绍一下关于javascript中dataset属性..html5中可以使用data-前缀设置我们需要的自定义属性,来进行一些数据的存放.下面是元素应用data属性的一个例子:~~~~~~~~ ...

随机推荐

  1. caffe 基本知识简介

    很多不错的网页: 1.http://alanse7en.github.io/caffedai-ma-jie-xi-1/ 主要介绍基本caffe知识 interace 接口 API中的‘I’ Caffe ...

  2. BZOJ 1257 余数之和sum

    题目链接:http://61.187.179.132/JudgeOnline/problem.php?id=1257 题意:计算sigama(m%i)(1<=i<=n). 思路: 这样就简 ...

  3. 梭子鱼:APT攻击是一盘更大的棋吗?

    随着企业对IT的依赖越来越强,APT攻击可能会成为一种恶意打击竞争对手的手段.目前,APT攻击目标主要有政治和经济目的两大类.而出于经济目的而进行的APT攻击可以获取竞争对手的商业信息,也可使用竞争对 ...

  4. OpenJudge 2738 浮点数加法

    1.链接地址: http://bailian.openjudge.cn/practice/2738 2.题目: 总时间限制: 1000ms 内存限制: 65536kB 描述 求2个浮点数相加的和 题目 ...

  5. 一个少了context的赋值的错误

    错误类型如下,怎么也找不到错误,后来仔细看了源代码,原来忘了context的赋值,只是声明,声明后不马上引用到值容易出事. 11-12 15:00:09.877: E/AndroidRuntime(6 ...

  6. ZooKeeper02

    Zookeeper 分布式服务框架是 Apache Hadoop 的一个子项目,主要是用来解决分布式应用中经常遇到的一些数据管理问题.

  7. Python 输出

    普通的输出 生活中的“输出”: 软件中的“输出”: python中变量的输出: print('hello world') 格式化输出 占位符% print('Hello,%s' % 'Python') ...

  8. js的非空校验

    利用TagName获取元素名称,进行批量非空校验 var input = document.getElementsByTagName("input"); for (var i=0; ...

  9. Kafka:ZK&plus;Kafka&plus;Spark Streaming集群环境搭建(二十二)Spark Streaming接收流数据及使用窗口函数

    官网文档:<http://spark.apache.org/docs/latest/streaming-programming-guide.html#a-quick-example> Sp ...

  10. vps搭建个人网盘不二之选—kodexplorer介绍,包含安装步骤

    之前给大家介绍过seafile.h5ai等网盘系统,今天给大家介绍下kodexplorer网盘系统.Kodexplorer,也叫芒果云.可道云.kodcloud,总之名字改了不少.但其本身作为一个网盘 ...