jQuery的图片懒加载
jQuery的图片懒加载
function imgLazyLoad(options) {
var settings = {
Id: $('img'),
threshold: 100,
effectspeed: 0,
effect: "fadeIn"
};
$.extend(settings, options);
var $this = settings.Id; var timeout = null;
$(window).bind('load resize', loadImg)
$(window).scroll(function () {
if (timeout) { clearTimeout(timeout); }
timeout = setTimeout(loadImg ? loadImg : "", 100);
}); function loadImg() {
settings.Id.each(function () {
if (!belowthefold(this)) {
if ($(this).is(':visible')) {
$(this).trigger("appear");
}
}
});
}
return $this.each(function (i) {
var self = this;
//$(self).data('t', $(self).offset().top)
if (belowthefold(self)) {
self.loaded = false;
} else {
if ($(self).is(':visible')) {
$(self).attr("src", $(self).attr("original"));
self.loaded = true;
}
}
$(self).one("appear",
function () {
if (!this.loaded) {
$("<img />").bind("load",
function () {
$(self).hide().attr("src", $(self).attr("original"))[settings.effect](settings.effectspeed);
self.loaded = true
}).attr("src", $(self).attr("original"))
}
});
});
function belowthefold(element) {
var fold = $(window).height() + $(window).scrollTop()
return fold <= $(element).offset().top - settings.threshold;
};
}
imgLazyLoad({threshold:0,effectspeed:800})
jQuery的图片懒加载的更多相关文章
- 使用jQuery实现图片懒加载原理
原文:https://www.liaoxuefeng.com/article/00151045553343934ba3bb4ed684623b1bf00488231d88d000 在网页中,常常需要用 ...
- jQuery.imgLazyLoad图片懒加载组件
一.前言 当一个页面中请求的图片过多,而且图片太大,页面访问的速度是非常慢的,对用户的体验非常不友好:使用图片懒加载,可以减轻服务器的压力,增加页面的访问量,这里主要是总结一下我自己写的图片懒加载组件 ...
- jQuery插件图片懒加载lazyload
来自XXX的前言: 什么是ImageLazyLoad技术 在页面上图片比较多的时候,打开一张页面必然引起与服务器大数据量的 交互.尤其是对于高清晰的图片,占的几M的空间.ImageLazyLoad技术 ...
- jQuery实现图片懒加载
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- jquery <img> 图片懒加载 和 标签如果没有加载出图片或没有图片,就显示默认的图片
参考链接:http://www.jq22.com/jquery-info390 或压缩包下载地址:链接:http://pan.baidu.com/s/1hsj8ZWw 密码:4a7s 下面是没有 ...
- 基于jquery的图片懒加载js
function lazyload(option){ var settings={ defObj:null, defHeight: }; settings=$.extend(settings,opti ...
- [jQuery插件]手写一个图片懒加载实现
教你做图片懒加载插件 那一年 那一年,我还年轻 刚接手一个ASP.NET MVC 的 web 项目, (C#/jQuery/Bootstrap) 并没有做 web 的经验,没有预留学习时间, (作为项 ...
- 前端实现图片懒加载(lazyload)的两种方式
在实际的项目开发中,我们通常会遇见这样的场景:一个页面有很多图片,而首屏出现的图片大概就一两张,那么我们还要一次性把所有图片都加载出来吗?显然这是愚蠢的,不仅影响页面渲染速度,还浪费带宽.这也就是们通 ...
- jquery实现简单瀑布流布局(续):图片懒加载
# jquery实现简单瀑布流布局(续):图片懒加载 这篇文章是jquery实现简单瀑布流布局思想的小小扩展.代码基于前作的代码继续完善. 图片懒加载就是符合某些条件时才触发图片的加载.最常见的具体表 ...
随机推荐
- hdu 2098 分拆素数和(一个偶数拆分成两个不同素数和 拆法数量)
传送门: http://acm.hdu.edu.cn/showproblem.php?pid=2098 分拆素数和 Time Limit: 1000/1000 MS (Java/Others) ...
- DBUtils连接池,websocket
1.mysql数据库连接池 概念:数据库连接池(Connection pooling)是程序启动时建立足够的数据库连接,并将这些连接组成一个连接池,由程序动态地对池中的连接进行申请,使用,释放. 这样 ...
- c和c++单链表
c++版 #include<iostream> #include<malloc.h> using namespace std; struct node{ int data; n ...
- stl学习之namespace
一.为什么需要命名空间(问题提出) 命名空间是ANSIC++引入的可以由用户命名的作用域,用来处理程序中常见的同名冲突. 在 C语言中定义了3个层次的作用域,即文件(编译单元).函数和复合语句.C++ ...
- memcache和redis的区别和联系
一.区别 Memcache : 1,对每个key的数据最大是1M. 2,对各种技术支持比较全面,session可以存储memcache中,各种框架(例如thinkphp)对memcache支持比较好. ...
- Sass使用
1. 什么是Sass ??? Sass是一个将脚本解析成CSS的脚本语言,也可以称为CSS扩展语言. 2. 安装: 第一步:先安装Ruby (sass基于Ruby语言开发而成,因此安装sass前需 ...
- 分布式缓存 Redis(二)
代码实例 namespace RedisTest { class Program { static void Main(string[] args) { Student stu = RedisOper ...
- Java : Spring基础 IOC
使用 ApplicationContext context = new ClassPathXmlApplicationContext("applicationContext.xml" ...
- 嵌入式框架Zorb Framework搭建一:嵌入式环境搭建、调试输出和建立时间系统
我是卓波,我是一名嵌入式工程师,我万万没想到我会在这里跟大家吹牛皮. 嵌入式框架Zorb Framework搭建过程 嵌入式框架Zorb Framework搭建一:嵌入式环境搭建.调试输出和建立时间系 ...
- LeetCode初级算法的Python实现--链表
LeetCode初级算法的Python实现--链表 之前没有接触过Python编写的链表,所以这里记录一下思路.这里前面的代码是和leetcode中的一样,因为做题需要调用,所以下面会给出. 首先定义 ...