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 人气:183
分享到:
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

  • 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

  • 让jQuery与其他JavaScript库并存避免冲突的方法 2014-07-11

    为了解决jQuery和其他JavaScript库中$()函数的冲突,需要取消jQuery的$()函数,下面有个不错的方法,感兴趣的朋友可以参考下 为了解决jQuery和其他JavaScript库中$()函数的冲突,需要取消jQuery的$()函数,为此jQuery提供了如下方法: //取消jQuery中的$()函数 jQuery.noConflict() ; 将上面的粗体字代码放在JavaScript代码的第一行,这行代码就会取消jQuery的$()函数 注:其实只是取消了jQuery()函数的

  • Javascript简单实现可拖动的div 2014-06-01

    实现div拖动有很多方法,不过目前比较常见的就是使用javascript实现的了,下面有个不错的示例,大家可以尝试操作下 <html> <head> <script type="text/javascript"> var x; var y; function $(id) { return document.getElementById(id) } function mousedown() { x=event.clientX-$("px&qu

  • 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

  • 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

  • top, self, parent, open, href, location between the pop-up window 2010-10-26

    top, self, parent, open, href, location explained The script used on these keywords, many people often do not understand the way I believe that we can use the following quick to understand: (If A, B, C, D, Page is htm, D is C, iframe , C is B, iframe

  • 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 =

  • Struts 2 + Spring 2 + JPA + AJAX (d) 2010-11-06

    The pages We only have two pages, "index.jsp" and "list.jsp". "List.jsp" returns a table with a list of the persons on the database.We have this list on a different page because we are going to add some AJAX to spicy it up. 1

iOS 开发

Android 开发

Python 开发

JAVA 开发

开发语言

PHP 开发

Ruby 开发

搜索

前端开发

数据库

开发工具

开放平台

Javascript 开发

.NET 开发

云计算

服务器

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

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

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