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的图片懒加载的更多相关文章

  1. 使用jQuery实现图片懒加载原理

    原文:https://www.liaoxuefeng.com/article/00151045553343934ba3bb4ed684623b1bf00488231d88d000 在网页中,常常需要用 ...

  2. jQuery.imgLazyLoad图片懒加载组件

    一.前言 当一个页面中请求的图片过多,而且图片太大,页面访问的速度是非常慢的,对用户的体验非常不友好:使用图片懒加载,可以减轻服务器的压力,增加页面的访问量,这里主要是总结一下我自己写的图片懒加载组件 ...

  3. jQuery插件图片懒加载lazyload

    来自XXX的前言: 什么是ImageLazyLoad技术 在页面上图片比较多的时候,打开一张页面必然引起与服务器大数据量的 交互.尤其是对于高清晰的图片,占的几M的空间.ImageLazyLoad技术 ...

  4. jQuery实现图片懒加载

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. jquery <img> 图片懒加载 和 标签如果没有加载出图片或没有图片,就显示默认的图片

    参考链接:http://www.jq22.com/jquery-info390 或压缩包下载地址:链接:http://pan.baidu.com/s/1hsj8ZWw 密码:4a7s    下面是没有 ...

  6. 基于jquery的图片懒加载js

    function lazyload(option){ var settings={ defObj:null, defHeight: }; settings=$.extend(settings,opti ...

  7. [jQuery插件]手写一个图片懒加载实现

    教你做图片懒加载插件 那一年 那一年,我还年轻 刚接手一个ASP.NET MVC 的 web 项目, (C#/jQuery/Bootstrap) 并没有做 web 的经验,没有预留学习时间, (作为项 ...

  8. 前端实现图片懒加载(lazyload)的两种方式

    在实际的项目开发中,我们通常会遇见这样的场景:一个页面有很多图片,而首屏出现的图片大概就一两张,那么我们还要一次性把所有图片都加载出来吗?显然这是愚蠢的,不仅影响页面渲染速度,还浪费带宽.这也就是们通 ...

  9. jquery实现简单瀑布流布局(续):图片懒加载

    # jquery实现简单瀑布流布局(续):图片懒加载 这篇文章是jquery实现简单瀑布流布局思想的小小扩展.代码基于前作的代码继续完善. 图片懒加载就是符合某些条件时才触发图片的加载.最常见的具体表 ...

随机推荐

  1. hdu 2098 分拆素数和(一个偶数拆分成两个不同素数和 拆法数量)

    传送门: http://acm.hdu.edu.cn/showproblem.php?pid=2098 分拆素数和 Time Limit: 1000/1000 MS (Java/Others)     ...

  2. DBUtils连接池,websocket

    1.mysql数据库连接池 概念:数据库连接池(Connection pooling)是程序启动时建立足够的数据库连接,并将这些连接组成一个连接池,由程序动态地对池中的连接进行申请,使用,释放. 这样 ...

  3. c和c++单链表

    c++版 #include<iostream> #include<malloc.h> using namespace std; struct node{ int data; n ...

  4. stl学习之namespace

    一.为什么需要命名空间(问题提出) 命名空间是ANSIC++引入的可以由用户命名的作用域,用来处理程序中常见的同名冲突. 在 C语言中定义了3个层次的作用域,即文件(编译单元).函数和复合语句.C++ ...

  5. memcache和redis的区别和联系

    一.区别 Memcache : 1,对每个key的数据最大是1M. 2,对各种技术支持比较全面,session可以存储memcache中,各种框架(例如thinkphp)对memcache支持比较好. ...

  6. Sass使用

    1. 什么是Sass ???   Sass是一个将脚本解析成CSS的脚本语言,也可以称为CSS扩展语言. 2. 安装: 第一步:先安装Ruby (sass基于Ruby语言开发而成,因此安装sass前需 ...

  7. 分布式缓存 Redis(二)

    代码实例 namespace RedisTest { class Program { static void Main(string[] args) { Student stu = RedisOper ...

  8. Java : Spring基础 IOC

    使用 ApplicationContext context = new ClassPathXmlApplicationContext("applicationContext.xml" ...

  9. 嵌入式框架Zorb Framework搭建一:嵌入式环境搭建、调试输出和建立时间系统

    我是卓波,我是一名嵌入式工程师,我万万没想到我会在这里跟大家吹牛皮. 嵌入式框架Zorb Framework搭建过程 嵌入式框架Zorb Framework搭建一:嵌入式环境搭建.调试输出和建立时间系 ...

  10. LeetCode初级算法的Python实现--链表

    LeetCode初级算法的Python实现--链表 之前没有接触过Python编写的链表,所以这里记录一下思路.这里前面的代码是和leetcode中的一样,因为做题需要调用,所以下面会给出. 首先定义 ...