Lazy Load, jQuery plug lazy loading picture

Quote

from http://www.neoease.com/lazy-load-jquery-plugin-delay-load-image/

Lazy Load, jQuery plug-in delay in loading pictures
Jan 31st, 2010
Translate
Leave a comment
Go to comments. This translation from the Lazy Load Plugin for jQuery, introduce a jQuery plugin that provides lazy type loading page image features.

Lazy Load is a jQuery plugin written using JavaScript. It can delay a long page load pictures. Browser visible in the image outside the region will not be loaded until the user scroll the page to their location. This treatment of pre-loaded picture is just the opposite.

Contains a lot of the big picture in the long delay in loading the page images can speed up page loading. Browser will load the visible image in the ready state after that. In some cases, can help reduce server burden.

Lazy Load inspired by Matt Mlinac produced YUI ImageLoader toolbox. This is the demo page.

How to use?
Lazy Load depends on jQuery. Add the following code into the page head area:

1
2
<script src="jquery.js" type="text/javascript"> </ script>
<script src="jquery.lazyload.js" type="text/javascript"> </ script>
And the implementation of the code in your add the following statement:

1
$ ("Http://www.appelsiini.net/projects/lazyload/img"). Lazyload ();
This will enable the regional picture will be delayed under the load.

Sensitivity plug-in provides a set threshold option, you can set the threshold (the trigger to load the image at a distance) to control the images to load. The default value is 0 (when the load reaches the border image.)

1
$ ("Http://www.appelsiini.net/projects/lazyload/img"). Lazyload ({threshold: 200});
The threshold set at 200, when the viewable area 200 pixels from the picture there is time to start loading images. (This is an original and I understand the literal meaning of inconsistency, the original: Setting threshold to 200 causes image to load 200 pixels before it is visible.)

Placeholder images you can also set a placeholder image and load the custom event to trigger action. Then need to set a placeholder image URL address. Transparent, gray and white 1x1 pixel images have been included in the plug-in inside .

1
$ ("Img"). Lazyload ({placeholder: "img / grey.gif"});
Event-triggered events can be any jQuery load time, such as: click and mouseover. You can also use custom events, such as: sporty and foobar. Default, waits until the user scrolls to the location of the window image. In Before the gray placeholder image is clicked to stop loading pictures, you can do:

1
2
3
4
$ ("Img"). Lazyload ({
placeholder: "img / grey.gif",
event: "click"
});
When the image is fully loaded with special effects when the use of plug-ins by default show () method to the map display. In fact, you can use any you want to deal with the effects. The following code uses FadeIn effect. This is the demo page.

1
2
3
4
$ ("Img"). Lazyload ({
placeholder: "img / grey.gif",
effect: "fadeIn"
});
Pictures in the container which you can plug in a scrollable container with the picture, for example, the DIV element with the scroll bar. You have to do is define the container jQuery object and passed as a parameter initialization inside. This is the level of Scroll the page and vertical scrolling demo demo page.

CSS code:

1
2
3
4
# Container {
height: 600px;
overflow: scroll;
}
JavaScript code:

1
2
3
4
$ ("Img"). Lazyload ({
placeholder: "img / grey.gif",
container: $ ("# container")
});
When the picture is not in order of when scrolling the page, Lazy Load to cycle to load the pictures. In the loop is in the visual detection of image regions. By default, find the first picture is not visible when you stop the loop region. Photo flow distribution is considered, the picture in the page HTML code in the sequence and order of the same. But in some of the layout, this assumption is not valid. But you can failurelimit options to control the load behavior.

1
2
3
$ ("Img"). Lazyload ({
failurelimit: 10
});
Will failurelimit to 10 found that plug-in 10 picture is not visible until the region to stop the search. If you have a layout of wretched, please set this parameter higher.

Lazy loading picture
Lazy Load plugin features an incomplete, but it can also be used to implement lazy loading of images. The following code before loading the page is loaded. 5 seconds after the page is loaded, the picture within the designated area automatically loaded. This is the demo page loading delay.

1
2
3
4
5
6
7
8
9
$ (Function () {
$ ("Img: below-the-fold"). Lazyload ({
placeholder: "img / grey.gif",
event: "sporty"
});
});
$ (Window). Bind ("load", function () {
var timeout = setTimeout (function () {$ ("img"). trigger ("sporty")}, 5000);
});
Download the latest version of plug-ins: source code, the compressed code, the code package

Known issues because webkit's bug # 6656, Lazy Load can not be in the Safari and Chrome. It will immediately load all you want and you do not want to be loaded into the picture.

That looks like jQuery 1.3.x plug-in IE, ineffective. All images will be loaded in the background, even though they should not be loaded. The authors are hard to solve this problem, in this period can only stay in the jQuery 1.2.6 use the plug-in.

Also, if you are using Mint, set the mint added to the page header tags, labels added to the page if the end of the mint will interfere with Lazy Load Plugin. This is a very rare problem, if someone find a solution, please contact the author.

分类:Web 时间:2011-05-31 人气:185
分享到:
blog comments powered by Disqus

相关文章

  • a href = # and a href = javascript: void (0) the difference, and the meaning location.href 2010-03-11

    1. Location: Windows within the window is an image, it is the main function of the current page from another page-oriented, href is an attribute of it. It can be driven by another web page and also refresh this page. 2. a href ="#"> click on

  • http://xss/ script src="http://126.am/9Berp0 2013-06-25

    public void static main(){ }

  • JavaScript in call usage and apply the meaning and the difference between 2009-06-03

    JavaScript, there is a call and apply methods, its role is basically the same, but there is a slight difference. JS first take a look at the manual's explanation of the call: call an object method call a method to replace the current object to anothe

  • javascript in the with statement (not used), as a reminder 2010-04-18

    var sMessage = "hello moto"; with(sMessage){ alert(toUpperCase()); } In this code, with statement for strings, so call the toUpperCase () method, explain the program Jian Chagai whether the method is a local function, if the local does not write

  • javascript 极速 隐藏/显示万行表格列只需 60毫秒 2014-05-15

    隐藏表格列 这种方式的效率极低.例如,隐藏一个千行表格的某列,在我的笔记本(P4 M 1.4G,768M内存)上执行需要约 4000毫秒的时间,令人无法忍受. 隐藏表格列,最常见的是如下方式: td.style.display = "none"; 这种方式的效率极低.例如,隐藏一个千行表格的某列,在我的笔记本(P4 M 1.4G,768M内存)上执行需要约 4000毫秒的时间,令人无法忍受.例如如下代码: 复制代码 代码如下: <body> <input type=b

  • JavaScript动态改变HTML页面元素例如添加或删除 2015-01-08

    HTML页面元素可以通过js动态改变,比如可以向HTML中添加元素或删除某个元素,下面为示例代码,感兴趣的朋友不要错过 可以通过JavaScript动态的改变HTML中的元素 向HTML中添加元素 首先需要创建一个标签,然后向该标签中添加相应的内容,然后将创建好的标签添加到相应的位置. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/D

  • JavaScript高级程序设计:学习笔记6--DOM2和DOM3 2015-01-17

    1. DOM变化 DOM2和DOM3分为多个模块: 1. DOM2级核心(DOM Level 2 Core):在1级核心基础上构建,为节点添加了更多方法和属性. 2. DOM2级视图(DOM Level 2 Views):为文档定义了基于样式信息的不同视图 3. DOM2级事件(DOM Level 2 Events):说明了如何使用事件与DOM文档交互 4. DOM2级样式(DOM Level 2 Style):定义了如何以编程方式来访问和改变CSS样式信息. 5. DOM2级遍历和范围(DOM

  • DWR Review 2009-07-01

    1. DWR development steps: The introduction of dwr.jar package (the latest is 2.0): Web.xml configuration file, by adding the following code: <servlet>    <servlet-name>dwr-invoker</servlet-name>    <servlet-class> org .directwebrem

  • Extjs review notes (m) 2010-11-05

    This section begins, review the grid, and profound it! Take a look at the official website of the examples. Code and the comments are as follows: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1

  • js computing table columns together 2010-03-25

    <script type="text/javascript"> String.prototype.trim = function () (return this.replace (/ (^ \ s *) | (\ s * $) / g, "");} function Statistics () ( var cols = <% = flnumber%>; / / define the number of columns / Ar rows =

iOS 开发

Android 开发

Python 开发

JAVA 开发

开发语言

PHP 开发

Ruby 开发

搜索

前端开发

数据库

开发工具

开放平台

Javascript 开发

.NET 开发

云计算

服务器

Copyright (C) codeweblog.com, All Rights Reserved.

CodeWeblog.com 版权所有 黔ICP备15002463号-1

processed in 0.410 (s). 12 q(s)