js lazy lazy loading an image page images

Lazy Load is a jQuery plugin written in JavaScript, it can be a long delay in loading the page the pictures in the browser viewing area outside the picture will not be loaded until the user scroll the page to their location. This image pre-loading approach is just the opposite.

In the big picture that contains many pages long delay in loading pictures you can speed up page loading. Browser will be loaded after the visible image is in the ready state, in some cases can help reduce the burden on the server.

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 in the execution of your code by adding the following statement:

1
$("http://www.appelsiini.net/projects/lazyload/img").lazyload();

This area will be delayed under the picture will load.

Set sensitivity

Plug-in provides threshold options, you can set the threshold (the trigger to load the image at the distance) to control the images to load default value is 0 (when the load reaches the border pictures).

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, when there began to load the picture (this one the original literal meaning, and I understand the inconsistency, the original: Setting threshold to 200 causes image to load 200 pixels before it is visible.)

Placeholder image

You can also set a placeholder image and define the load event to trigger the action. Then need to set a placeholder image URL address transparent, gray and white 1x1 pixel images have been included in the plug inside.

1
$("img").lazyload({ placeholder : "img/grey.gif" });

Event-triggered load

JQuery event can be any 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 where the picture window in the gray placeholder image Click the images to load before being blocked, you can do:

1
2
3
4
$("img").lazyload({
        placeholder : "img/grey.gif",
        event : "click"
});

Use of special effects

When the image fully loads, plug-in by default use show() method to map displayed. In fact, you can use any special effects you want to deal with the code below to use FadeIn effect, which is the demo page .

1
2
3
4
$("img").lazyload({
        placeholder : "img/grey.gif",
        effect : "fadeIn"
});

Pictures inside the container

You can plug in a scrollable container with a picture, for example, the DIV element with a scroll bar you have to do is define the container for the jQuery object and passed as a parameter inside the initialization method, which is a horizontal scrolling demo page and vertical scrolling 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 does not order

Scroll down the page when, Lazy Load will load the pictures for the cycle in the loop detection area in the visual image is by default not visible in the first area to find a picture stop the loop. Picture is considered to flow distribution, the order in the page image and HTML code in the same order, but in some of the layout, this assumption is not valid, but you can failurelimit options to control load behavior.

1
2
3
$("img").lazyload({
        failurelimit : 10
});

Will failurelimit to 10 found that plug-in area 10 picture is not visible until the search stops if you have a layout of wretched, please set this parameter higher.

Lazy Loading Images

Lazy Load Plugin for an incomplete features, but it can also be used to implement lazy loading of images below code to achieve page load before loading the page is loaded after 5 seconds, the picture within the designated area automatically loaded, which is delayed loading the demo page .

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);
});
/*
 * Lazy Load - jQuery plugin for lazy loading images
 *
 * Copyright (c) 2007-2009 Mika Tuupola
 *
 * Licensed under the MIT license:
 *   http://www.opensource.org/licenses/mit-license.php
 *
 * Project home:
 *   http://www.appelsiini.net/projects/lazyload
 *
 * Version:  1.5.0
 *
 */
(function($) {

    $.fn.lazyload = function(options) {
        var settings = {
            threshold    : 0,
            failurelimit : 0,
            event        : "scroll",
            effect       : "show",
            container    : window
        };

        if(options) {
            $.extend(settings, options);
        }

        /* Fire one scroll event per scroll. Not one scroll event per image. */
        var elements = this;
        if ("scroll" == settings.event) {
            $(settings.container).bind("scroll", function(event) {

                var counter = 0;
                elements.each(function() {
                    if ($.abovethetop(this, settings) ||
                        $.leftofbegin(this, settings)) {
                            /* Nothing. */
                    } else if (!$.belowthefold(this, settings) &&
                        !$.rightoffold(this, settings)) {
                            $(this).trigger("appear");
                    } else {
                        if (counter++ > settings.failurelimit) {
                            return false;
                        }
                    }
                });
                /* Remove image from array so it is not looped next time. */
                var temp = $.grep(elements, function(element) {
                    return !element.loaded;
                });
                elements = $(temp);
            });
        }

        this.each(function() {
            var self = this;

            /* Save original only if it is not defined in HTML. */
            if (undefined == $(self).attr("original")) {
                $(self).attr("original", $(self).attr("src"));
            }

            if ("scroll" != settings.event ||
                    undefined == $(self).attr("src") ||
                    settings.placeholder == $(self).attr("src") ||
                    ($.abovethetop(self, settings) ||
                     $.leftofbegin(self, settings) ||
                     $.belowthefold(self, settings) ||
                     $.rightoffold(self, settings) )) {

                if (settings.placeholder) {
                    $(self).attr("src", settings.placeholder);
                } else {
                    $(self).removeAttr("src");
                }
                self.loaded = false;
            } else {
                self.loaded = true;
            }

            /* When appear is triggered load original image. */
            $(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"));
                };
            });

            /* When wanted event is triggered load original image */
            /* by triggering appear.                              */
            if ("scroll" != settings.event) {
                $(self).bind(settings.event, function(event) {
                    if (!self.loaded) {
                        $(self).trigger("appear");
                    }
                });
            }
        });

        /* Force initial check if images should appear. */
        $(settings.container).trigger(settings.event);

        return this;

    };

    /* Convenience methods in jQuery namespace.           */
    /* Use as  $.belowthefold(element, {threshold : 100, container : window}) */

    $.belowthefold = function(element, settings) {
        if (settings.container === undefined || settings.container === window) {
            var fold = $(window).height() + $(window).scrollTop();
        } else {
            var fold = $(settings.container).offset().top + $(settings.container).height();
        }
        return fold <= $(element).offset().top - settings.threshold;
    };

    $.rightoffold = function(element, settings) {
        if (settings.container === undefined || settings.container === window) {
            var fold = $(window).width() + $(window).scrollLeft();
        } else {
            var fold = $(settings.container).offset().left + $(settings.container).width();
        }
        return fold <= $(element).offset().left - settings.threshold;
    };

    $.abovethetop = function(element, settings) {
        if (settings.container === undefined || settings.container === window) {
            var fold = $(window).scrollTop();
        } else {
            var fold = $(settings.container).offset().top;
        }
        return fold >= $(element).offset().top + settings.threshold  + $(element).height();
    };

    $.leftofbegin = function(element, settings) {
        if (settings.container === undefined || settings.container === window) {
            var fold = $(window).scrollLeft();
        } else {
            var fold = $(settings.container).offset().left;
        }
        return fold >= $(element).offset().left + settings.threshold + $(element).width();
    };
    /* Custom selectors for your convenience.   */
    /* Use as $("img:below-the-fold").something() */

    $.extend($.expr[':'], {
        "below-the-fold" : "$.belowthefold(a, {threshold : 0, container: window})",
        "above-the-fold" : "!$.belowthefold(a, {threshold : 0, container: window})",
        "right-of-fold"  : "$.rightoffold(a, {threshold : 0, container: window})",
        "left-of-fold"   : "!$.rightoffold(a, {threshold : 0, container: window})"
    });

})(jQuery);

Download the plug-in

Latest Version: source code , code compression , code package

分类:Internet 时间:2010-11-11 人气:209
分享到:
blog comments powered by Disqus

相关文章

  • javascript原生和jquery库实现iframe自适应高度和宽度 2014-06-02

    这篇文章主要介绍了javascript原生和jquery库实现iframe自适应内容高度和宽度,需要的朋友可以参考下 javascript原生和jquery库实现iframe自适应内容高度和宽度---推荐使用jQuery的代码! ‍<iframe src="index.php" id="mainiframe" name="mainiframe" width="100%" frameborder="0"

  • 在JavaScript中重写jQuery对象的方法实例教程 2015-01-01

    这篇文章主要介绍了在JavaScript中重写jQuery对象的方法,在某些情况下jQuery无法满足应用开发的时候可以采用javascript重写jQuery方法来满足功能的实现,需要的朋友可以参考下 jQuery是一个款非常优秀的类库,它给我们解决了很多的客户端编程,但是任何东西都不是万能的,当它不能满足我们的需求时我们就需要对它进行重写,同时也不要影响其原有的功能或者修改其原有的功能:比如我现在的web应用程序大多数时候的数据交互都是通过Ajax来完成的,这样就可以将一些隐藏字段的数据保存

  • JavaScript 框架学习(JQuery) 2014-10-01

    参考: http://www.w3cschool.cc/jquery/jquery-tutorial.html 参考: http://tool.codeweblog.com/apidocs/apidoc?api=jquery // 注意:在JS代码中,为保证 JS代码能够正常运行,需要在HTML代码加载完毕后,再执行JS代码. <script> $(document).ready(function(){ // 代码放在这 ... ... // 好几一因为这个原因,jQuery无法选定DOM,所

  • 超全超实用的Javascript类库和jQuery插件大全之一:Web印刷排版 2012-10-09

    日期:2012-10-9 来源:GBin1.com 如果你需要解决一些开发中遇到的技术问题的话,很可能会找到一些相关的javascript类库或者是jQuery插件来实现.这样实用的类库或者jQuery插件往往是你应该时常收集并且保存的,特别是如果你不希望自己去处理不同浏览器的兼容性问题的话,使用现成的javascript类库或者是jQuery插件往往能够帮助你提高开发效率. 使用javascript类库可能并不一定是最好的选择,很多情况1下可能你会发现类库加载并不正确,或者有性能上的问题,例如

  • 超全超实用的Javascript类库和jQuery插件大全之一:图片,地图和图形 2012-10-15

    日期:2012-10-10 来源:GBin1.com 如果你需要解决一些开发中遇到的技术问题的话,很可能会找到一些相关的javascript类库或者是jQuery插件来实现.这样实用的类库或者jQuery插件往往是你应该时常收集并且保存的,特别是如果你不希望自己去处理不同浏览器的兼容性问题的话,使用现成的javascript类库或者是jQuery插件往往能够帮助你提高开发效率. 使用javascript类库可能并不一定是最好的选择,很多情况1下可能你会发现类库加载并不正确,或者有性能上的问题,例

  • 超全超实用的Javascript类库和jQuery插件大全之二:文字处理,表格和列表处理,实用... 2012-10-15

    日期:2012-10-15 来源:GBin1.com 如果你需要解决一些开发中遇到的技术问题的话,很可能会找到一些相关的javascript类库或者是jQuery插件来实现.这样实用的类库或者jQuery插件往往是你应该时常收集并且保存的,特别是如果你不希望自己去处理不同浏览器的兼容性问题的话,使用现成的javascript类库或者是jQuery插件往往能够帮助你提高开发效率. 使用javascript类库可能并不一定是最好的选择,很多情况1下可能你会发现类库加载并不正确,或者有性能上的问题,例

  • 分享50个使你成为高级javascript开发者的jQuery的代码开发技巧 2011-07-05

    翻译:Terry li - GBin1.com 英文: 50 jQuery Snippets That Will Help You Become A Better JavaScript Developer 1. 创建一个嵌套的过滤器 .filter(":not(:has(.selected))") //去掉所有不包含class为.selected的元素 2. 重用你的元素查询 var allItems = $("div.item"); var keepList =

  • 分享8个超酷的javascript类库和jQuery插件帮助你打造超炫的网站和web应用 2012-04-04

    日期:2012-4-4 来源:GBin1.com 是不是想创建更加吸引眼球的网站和web应用?是不是想让你的网站和应用让用户感觉更加与众不同?如果你想让你的网站显得鹤立鸡群的话,绝对应该看 看今天我们给大家推荐的这8个超酷的javascript类库.这些类库可能我们在以前的文章中也介绍过.如果你能够有效地整合到你的网站和web应用 中,肯定会让你的网站充满乐趣和创意.我们包含了特种超酷特效,时间线(timeline)等,非常适合创建但页面的网站.大家来看看吧!希望我们的文章 请务必给我们留言,谢

  • Send a html + javascript tool to do: party statement of copyright protected content dog link address Analyzer 2011-01-09

    Can be used on the line. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> Dog statement copyright-protected content Link Analyzer </TITLE> <META NAME="Generator" CONT

  • eclipse强大的代码[javascript|html|css|jquery|-]提示插件 ... 2011-08-09

    这前在网站上Eclipse开发JQuery环境设置(Spket) 文章提到过JQuery提示插件,但是经过多次的试验不尽人意,主要是其提示效果不理想,而且配置成功的概率非常的小.经过同事的推荐使用aptana插件还不错其代码提示功能非常的强大,而且aptana有自己独立的IDE.详细见:http://www.aptana.org/ 本文介绍在Eclipse下安装该插件,目的主要是解决jquery在eclipse下的代码提示. 注意选择eclipse 3.5,而且现在只能选择3.5,选择高版本的3

iOS 开发

Android 开发

Python 开发

JAVA 开发

开发语言

PHP 开发

Ruby 开发

搜索

前端开发

数据库

开发工具

开放平台

Javascript 开发

.NET 开发

云计算

服务器

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

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

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