jquery-lazyload延迟加载图片

 
代码修改片段

function update() {
var counter = 0;

/**fix by weiyj start***/
elements.sort(function(a,b){
var value=$(a).offset().top-$(b).offset().top;
if(value==0){
value=$(a).offset().left-$(b).offset().left;
}
return value;
});
/**fix by weiyj end ***/

 
 
 
下载地址:https://github.com/tuupola/jquery_lazyload
用法:
头部引用
<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.lazyload.js" type="text/javascript"></script> body引用
修改 HTML 代码中需要延迟加载的 IMG 标签
<!-- 
将真实图片地址写在 data-original 属性中,而 src 属性中的图片换成占位符的图片(例如 1x1 像素的灰色图片或者 loading 的 gif 图片) 
添加 class="lazy" 用于区别哪些图片需要延时加载,当然你也可以换成别的关键词,修改的同时记得修改调用时的 jQuery 选择器 
添加 width 和 height 属性有助于在图片未加载时占满所需要的空间 
--> 
<img class="lazy" src="grey.gif" data-original="example.jpg" width="640" heigh="480"> 
调用
$("img.lazy").lazyload();
 

参数说明

名称 默认值 说明
container window 父容器。延迟加载父容器中的图片。 [Demo1] [Demo2]
event 'scroll' 触发加载的事件 [Demo]
effect 'show' 加载使用的动画效果,如 show, fadeIn, slideDown 等 jQuery 自带的效果,或者自定义动画。 [Demo]
effectspeed undefined 动画时间。作为 effect 的参数使用:effect(effectspeed)
data_attribute 'original' 真实图片地址的 data 属性后缀
threshold 0 灵敏度。默认为 0 表示当图片出现在显示区域中的立即加载显示;设为整数表示图片距离 x 像素进入显示区域时进行加载;设为负数表示图片进入显示区域 x 像素时进行加载。
failure_limit 0 容差范围。页面滚动时,Lazy Load 会遍历延迟加载的图片,检查是否在显示区域内,默认找到第 1 张不可见的图片时,就终止遍历。因为 Lazy Load 认为图片的排序是与 HTML 中的代码中的排序相同,但是也可能会出现例外,通过该值来扩大容差范围。
skip_invisible true 跳过隐藏的图片。图片不可见时(如 display:none),不强制加载。
appear null 图片加载时的事件 (Function),有 2 个参数:elements_left(未加载的图片数量)、settings(lazyload 的参数)。[Demo](参考 DEMO 的源代码)
load null 图片加载后的事件 (Function),有 2 个参数,同 appear 。[Demo](参考 DEMO 的源代码)

在容器中使用:
#container {
height: 600px;
overflow: scroll;
}
$("img.lazy").lazyload({
container: $("#container")
});
实例:

<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta charset="utf-8">
<title>Lazy Load Enabled With AJAX Content</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
<style type="text/css">
.container img {
margin-bottom: 10px;
}

#container {
width: 800px;
overflow: scroll;
}

#inner_container {
width: 4750px;
}
</style>

</head>
<body>
<div id="container">
<div id="inner_container">
<img class="lazy" src="img/loading_16.gif" data-original="img/bmw_m1_hood.jpg" width="765" height="574" alt="BMW M1 Hood">
<img class="lazy" src="img/loading_16.gif" data-original="img/bmw_m1_side.jpg" width="765" height="574" alt="BMW M1 Side">
<img class="lazy" src="img/loading_16.gif" data-original="img/viper_1.jpg" width="765" height="574" alt="Viper 1">
<img class="lazy" src="img/loading_16.gif" data-original="img/viper_corner.jpg" width="765" height="574" alt="Viper Corner">
<img class="lazy" src="img/loading_16.gif" data-original="img/bmw_m3_gt.jpg" width="765" height="574" alt="BMW M3 GT">
<img class="lazy" src="img/loading_16.gif" data-original="img/corvette_pitstop.jpg" width="765" height="574" alt="Corvette Pitstop">
</div>
</div>

<script src="jquery-1.11.3.min.js"></script>
<script src="jquery.lazyload.js?v=1.9.7"></script>
<script>

$(function() {
$("img.lazy").lazyload({
effect : "fadeIn",
container: $("#container"),
threshold : -200
});
});

</script>
</body>
</html>

jquery-lazyload延迟加载图片 及 加载顺序 bug 修复的更多相关文章

  1. jQuery Lazy Load图片懒加载

    传送门:官网地址,jQuery Lazy Load v1.7.2下载,Github 使用方法: 1.引用js文件 <script src="jquery.js">< ...

  2. javaScript & jquery完美判断图片是否加载完毕

    好久没写东西了,正好最近因为工作需要,写了一个瀑布流异步加载的程序. 今天就不谈瀑布流,来谈一下关于load的问题. ----------------------------------------- ...

  3. 转载:用Jquery实现的图片预加载技术,可以实现有序加载和无序加载!

    一.背景 我们在做页面的时候,从用户体验的角度出发,肯定是希望用户以最快的速度看到完整的页面信息,但在实际情况中经常会遇到些问题. 比如受网速影响,页面加载素材的时间比较长,页面会出现短时间的错乱或者 ...

  4. jquery.lazyload (JS懒加载框架使用详解)

    /** 本地加载方式加载JS*/        NSString *path = [[NSBundle mainBundle] pathForResource:@"jquery.js&quo ...

  5. Jquery判断页面图片是否加载失败,加载失败则显示默认图片

    例子: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3. ...

  6. jQuery简单实现图片预加载

    我们在做网站的时候经常会遇到这样的问题:一个页面有大量的图片导致页面加载速度缓慢,经常会出现一个白页用户体验很不好.那么如何解决这个问题呢?下面我来介绍一种在实际应用中经常会使用到的js预加载的方法. ...

  7. 用jquery写的图片懒加载

    <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding= ...

  8. jquery.imgpreload.min.js插件实现页面图片预加载

    页面分享地址: http://wenku.baidu.com/link?url=_-G8miwbgDmEj6miyFtjit1duJggBCJmFjR2jky_G1VftD9eS9kwGOlFWAOR ...

  9. 对于富文本编辑器中使用lazyload图片懒加载

    使用lazyload.js图片懒加载的作用是给用户一个好的浏览体验,同时对服务器减轻了压力,当用户浏览到该图片的时候再对图片进行加载,项目中使用lazyload的时候需要将图片加入data-orgin ...

随机推荐

  1. Retrofit源码设计模式解析(上)

    Retrofit通过注解的方法标记HTTP请求参数,支持常用HTTP方法,统一返回值解析,支持异步/同步的请求方式,将HTTP请求对象化,参数化.真正执行网络访问的是Okhttp,Okhttp支持HT ...

  2. LeetCode 4 Median of Two Sorted Arrays (两个数组的mid值)

    题目来源:https://leetcode.com/problems/median-of-two-sorted-arrays/ There are two sorted arrays nums1 an ...

  3. Linux线程学习(二)

    线程基础 进程 系统中程序执行和资源分配的基本单位 每个进程有自己的数据段.代码段和堆栈段 在进行切换时需要有比较复杂的上下文切换   线程 减少处理机的空转时间,支持多处理器以及减少上下文切换开销, ...

  4. SAM4E单片机之旅——19、CAN间通信

    CAN协议具有良好的可靠性,在工业中应用广泛.这次就先熟悉CAN的基本功能. 开发板有两个CAN,每个CAN有8个信箱.这次内容是从CAN0的信箱0发送数据到CAN1的信箱0. 除本次使用的功能外,C ...

  5. Html 的实体字符大全

    HTML特殊符号对照表.常用的字符实体 最常用的字符实体 显示结果 描述 实体名称 实体编号   空格     < 小于号 < < > 大于号 > > & ...

  6. jquery.qrcode.js 插件生成二维码

    下载地址:https://github.com/jeromeetienne/jquery-qrcode 例子: <!doctype html> <html> <head& ...

  7. cocos2d-x之物理引擎初试

    发现问题:监听代码部分不能在onEnter()段书写 bool HelloWorld::init() { if ( !Layer::init() ) { return false; } visible ...

  8. POJ 2406 Power Strings (KMP)

    Power Strings Time Limit: 3000MSMemory Limit: 65536K Total Submissions: 29663Accepted: 12387 Descrip ...

  9. Vertica 项目常用代码

    1.查看目录下面有多少文件数 ls -l |grep "^-"|wc -l 思路很明显了,ls后通过grep进行过滤判断是文件还是文件夹, 如果是判断文件夹,可以使用ls -l | ...

  10. 通用cube refresh方案

    通用cube refresh c# script 解决方法: 需要设置的变量如下: User::varcubename,User::varolapconnstr,User::varolapdbname ...