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. Mac--查看公钥

    打开macbook的终端输入以下命令: $ cd ~/.ssh $ ls $ cat id_rsa.pub

  2. 【题解】洛谷P1315 [NOIP2011TG] 观光公交(前缀和+贪心)

    次元传送门:洛谷P1315 思路 思路大概想到了 可是代码实现却没想到 所以参考题解了 D2T3的贪心果然有难度 我们考虑在每次用加速器有两种情况 到下一个点还需要等待:以后的时间就不再影响了 到下一 ...

  3. CSU - 2059 Water Problem(Z线分割平面)

    一条‘Z’形线可以将平面分为两个区域,那么由N条Z形线所定义的区域的最大个数是多少呢?每条Z形线由两条平行的无限半直线和一条直线段组成 Input 首先输入一个数字T(T<100),代表有T次询 ...

  4. IOC-AutoFac

    学习过程中参考博客: AutoFac文档:http://www.cnblogs.com/wolegequ/archive/2012/06/09/2543487.html AutoFac使用方法总结:P ...

  5. iOS universallinks唤醒app

    从iOS9之后,苹果就推出了这个功能,用来唤醒外部app.这个功能在那些电商app上使用尤其广泛,当你打开对应的h5网页后,上面跳出一个是否跳转app的按钮. 现在iOS11已经基本覆盖,iOS12也 ...

  6. WPF几个样式

    其实也是大家学的最多的,网上的. 1.老版360 2.360悬浮窗 不好意思,没有找到悬浮球的图片,随便一个代替了 3.老版迅雷 4.新版360 遗憾的是这个样式没有完整的源代码.只是一个演示和图片代 ...

  7. ExcludeClipRect区域裁剪问题

    CPaintDC dc(this); CRect rt1; CPen newPen; newPen.CreatePen(PS_SOLID,1,RGB(0,0,0)); CPen *pOldPen = ...

  8. Qt 项目主进程接收Alarm 后在GUI上显示,并且可以有选择性输出文件

    项目主进程接收报警后,将alarm msg 发送给代理, 并将其分发: else if (msg.name == "MesLCUalarmRep") { QString error ...

  9. 红帽RHEL6.8离线环境下升级到RHEL7.3

    Red Hat Enterprise Linux 7 (RHEL 7) 是第一个支持从前一个 RHEL 主发行版本(RHEL 6)进行原位(in-place)升级的 RHEL 主版本.原位升级(in- ...

  10. UEditor显示Invalid or unexpected token

    原文链接http://www.qqdeveloper.com/a/53.html 问题背景    数据修改操作,需要做一个数据内容回显,该内容中包含代码.图片.普通文本等等内容,反正就是各种内容. 当 ...