图片懒加载插件lazyload.js详解

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title></title>

<SCRIPT src="jquery.js" type=text/javascript></SCRIPT>

<SCRIPT src="jquery.lazyload.js" type=text/javascript></SCRIPT>

<script type="text/javascript" charset="utf-8">

      $(function() {

          $("img").lazyload({

          placeholder : "images/loading.gif",

                 effect: "fadeIn"

           });

      });

</script>

<style>

img a,img{border:0px;}

div{ margin-bottom:10px;}

</style>

</head>

<body>

<img src="data:images/0.jpg" /><br />

<div><a href="#"><img src="data:images/loading.gif" data-original="images/1.jpg"></a></div>

<div><a href="#"><img src="data:images/loading.gif" data-original="images/2.jpg"></a></div>

<div><a href="#"><img src="data:images/loading.gif" data-original="images/3.jpg"></a></div>

<div><a href="#"><img src="data:images/loading.gif" data-original="images/4.jpg"></a></div>

<div><a href="#"><img src="data:images/loading.gif" data-original="images/5.jpg"></a></div>

<div><a href="#"><img src="data:images/loading.gif" data-original="images/6.jpg"></a></div>

<div><a href="#"><img src="data:images/loading.gif" data-original="images/7.jpg"></a></div>

<div><a href="#"><img src="data:images/loading.gif" data-original="images/8.jpg"></a></div>

<div><a href="#"><img src="data:images/loading.gif" data-original="images/9.jpg"></a></div>

<div><a href="#"><img src="data:images/loading.gif" data-original="images/10.jpg"></a></div>

</body>

</html>

注意：必须设置图片的高度或者宽度，否则插件可能无法正常工作

提前加载——Threshold

lazyload默认是当滚动到该图片位置时，加载该图片。但是可以通过设置Threshold参数来实现滚到距离其20px时就加载。

   $(function(){

        $("img.lazy").lazyload({

            threshold :20

        });

    })

事件触发——Event

当触发定义的事件时，图片才开始加载

   $(function(){

        $("img.lazy").lazyload({

            event : "click"

        });

    })

你可以使用这个来实现图片的延迟加载

$(function() {

    $("img.lazy").lazyload({

        event : "sporty"

    });

});

$(window).bind("load", function() {

    var timeout = setTimeout(function() {

        $("img.lazy").trigger("sporty")

    }, 5000);

});

上面的代码在页面加载完毕后五秒才开始加载图片

设定效果——Effects

插件默认的加载效果是 show() ,你可以使用任何你想要的效果。下面的代码使用了 fadeIn()

$("img.lazy").lazyload({

    effect : "fadeIn"

});

滚动容器内的图片——container

插件也可以使用在滚动容器内的图片上。下面的div拥有scrollerbar，内容的内容进行滚动，滚到图片位置时，图片开始加载

<div style="height:600px;overflow:scroll" id="container">

    <img class="lazy" data-original="img/example.jpg"  alt="" style="margin-top:1000px" height="200">

</div>

<script>

    $(function(){

        $("img.lazy").lazyload({

            container: $("#container")

        });

    })

</script>

不顺序排列的图片

插件会执行一个寻找未加载图片的循坏，该循环会检查图片是否可见，默认情况下，当第一个视图外的图片被找到，循环就会停止。
但是存在一种情况：页面布局图片的顺序和html图片代码的顺序不一致;它会导致本该加载的没有加载。这种情况下就可以将 failurelimit 设为 10 ，它令插件找到 10 个不在可见区域的图片是才停止搜索. 如果你有一个恶心的布局, 请把这个参数设高一点。

代码：

$("img.lazy").lazyload({

    failure_limit : 10

});

处理隐藏图片——skip_invisible

为了提升性能，插件默认忽略隐藏的图片；如果想要加载隐藏图片.设置skip_invisible为false;

注意：Webkit浏览器将自动把没有宽度和高度的图像视为不可见

$("img.lazy").lazyload({

    skip_invisible : true

});

jquery.lazyload.js的说明：http://www.appelsiini.net/projects/lazyload

下载地址:原版的：https://raw.github.com/tuupola/jquery_lazyload/master/jquery.lazyload.js

图片懒加载插件lazyload.js详解的更多相关文章

图片懒加载插件lazyload使用方法
图片懒加载插件lazyload使用方法一.如何使用: Lazy Load 依赖于 jQuery.引入文件 <script type="text/javascript" sr ...
图片懒加载插件echo.js——改造
今天做一个列表项需要用到懒加载,搜到网友推荐的echo.js,试用了一下,还不错.除了懒加载,还提供了throttle——节流,即用户快速滑动列表时,很快滑过的项的图片不会加载,只会加载最后停下来的位 ...
图片懒加载之lazyload.js插件使用
简介 lazyload.js用于长页面图片的延迟加载,视口外的图片会在窗口滚动到它的位置时再进行加载,这是与预加载相反的. 使用 lazyload依赖与jquery.所以先引入jquery和lazyl ...
jQuery图片懒加载插件jquery.lazyload.js使用实例注意事项说明
jQuery图片懒加载插件jquery.lazyload.js使用实例注意事项说明 jquery.lazyload.js是一个用JavaScript编写的jQuery插件.它可以延迟加载长页面中的图片 ...
Vue图片懒加载插件
图片懒加载是一个很常用的功能,特别是一些电商平台,这对性能优化至关重要.今天就用vue来实现一个图片懒加载的插件. 这篇博客采用"三步走"战略--Vue.use().Vue.dir ...
JS实现图片懒加载插件
一.前言我在前几篇博客的记录中,有说自己在做一个图片懒加载的功能,然后巴拉巴拉的遇到哪些问题,结果做完了也没对懒加载这个功能做一些记录,所以这篇文章主要针对我所实现的思路,以及代码做个记录,实现不佳 ...
Vue图片懒加载之lazyload插件使用
当内容没有加载完的时候,用户体验不是很好,这时候,可以使用lazyload这个插件,提升用户体验,使用方法特别简单易用一. vue lazyload插件: 插件地址:https://github.c ...
VUE图片懒加载-vue lazyload插件的简单上手使用（优化版本）
在用VUE做项目开发的过程中,首页用到了懒加载的方法,查找了一些方法,觉得官网写得太复杂,有一篇博客不错(https://www.cnblogs.com/xyyt/p/7650539.html),但是 ...
Js 之图片懒加载插件
一.PC端(lazyload) 1.引入js文件 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.m ...

随机推荐

笔记：Python异常处理与程序调试
Python异常处理与程序调试 Python提供了强大的异常处理机制,通过捕获异常可以提高程序的健壮性.异常处理还具有释放对象,中止循环的运行等作用.在程序运行的过程中,如果发生了错误,可以返回事先约 ...
JS规则我还有其它用途( +号操作符）例如，算术操作符(+、-、*、/等)，比较操作符(<、>、>=、<=等)，逻辑操作符(&&、||、！)
我还有其它用途( +号操作符) 操作符是用于在JavaScript中指定一定动作的符号. (1)操作符看下面这段JavaScript代码. sum = numa + numb; 其中的"= ...
JavaScript特效源码(3、菜单特效)
1.左键点击显示菜单左键弹出式菜单[推荐][修改显示的文字及链接即可][共2步] ====1.将以下代码加入HEML的<head></head>之间: <style t ...
Android开发音视频开发需要了解的专业术语知识
前言在摸索一段时间的音视频开发后,越来越发现这个坑的深度真是特别的深. 除了了解Android自带的音视频处理API以外,还得了解一些视频与音频方面的知识.这篇博客就是主要讲解这方面的专业术语.内容 ...
pyQT Dialog默认选中某一个选项问题的解决
方法一: 在新建ui文件时不要新建Dialog # -*- coding: utf-8 -*- # Form implementation generated from reading ui file ...
洛谷P4550 【收集邮票】
题目链接: 神仙题QAQ 题目分析: 概率期望题是不可能会的,一辈子都不可能会的QAQ 这个题也太仙了首先明确一下题意里面我感觉没太说清楚的地方,这里是抽到第\(i\)次要\(i\)元钱,不是抽到第 ...
深入浅出 Java Concurrency (28): 线程池 part 1 简介[转]
从这一节开始正式进入线程池的部分.其实整个体系已经拖了很长的时间,因此后面的章节会加快速度,甚至只是一个半成品或者简单化,以后有时间的慢慢补充.完善. 其实线程池是并发包里面很重要的一部分,在实际情况 ...
Liunx常用命令行（Ubuntu）
关闭防火墙的命令行: 1. 永久性生效开启:chkconfig iptables on 关闭:chkconfig iptables off 2. 即时生效,重启后失效开启:service ipta ...
使用ResponseEntity进行返回json数据
在最近的项目中,与上位机进行数据传输时,上位机需要服务器的响应得知服务器是否正常运行,数据是否正常发送在最近的调试中我使用ResponseEntity<Map<String,Object ...
Leetcode937. Reorder Log Files重新排列日志文件
你有一个日志数组 logs.每条日志都是以空格分隔的字串. 对于每条日志,其第一个字为字母数字标识符.然后,要么: 标识符后面的每个字将仅由小写字母组成,或: 标识符后面的每个字将仅由数字组成. 我们 ...