分享一个jQuery的图片预加载插件 - QueryLoader2 --

2012-05-28.Form:互联网

分享一个jQuery的预加载插件，这个插件通过检查页面中的所有元素来提前加载所有包含的图片（包括背景图片），这个版本的插件是原来版本的一个更新，更容易使用。

Queryloader目前需要jQuery1.7，并且支持IE>7, Chrome, Safari和Firefox。

如何使用

引入类库

当然你必须在以上代码之前引入jQuery类库，然后调用如下代码：
$(document).ready(function () {
$("body").queryLoader2();
});

如果你在iOS上使用，请调用如下：

window.addEventListener('DOMContentLoaded', function() {
$("body").queryLoader2();
});

相关选项：

backgroundColor
(string) 加载的背景颜色

barColor
(string) 加载条背景颜色

barHeight
(int) 加载条高度，缺省为1

deepSearch
(boolean) 设置为“true“来找到所有的指定元素对应图片。如果你不希望查找子元素，可以设置为false。

percentage
(boolean) 设置为"true"来启用百分比展示，缺省为false

completeAnimation
(string) 设定结束的动画类型，”grow“或者为"fade"，缺省为fade

onLoadComplete
(function) 加载完毕后调用的方法。对于修改动画非常实用

onComplete
(function) 这个方法在完成加载和动画后调用

/*
* QueryLoader v2 - A simple script to create a preloader for images
*
* For instructions read the original post:
* http://www.gayadesign.com/diy/queryloader2-preload-your-images-with-ease/
*
* Copyright (c) 2011 - Gaya Kessler
*
* Licensed under the MIT license:
*   http://www.opensource.org/licenses/mit-license.php
*
* Version: 2.1
* Last update: 11-1-2011
*
*/
(function($) {
    var qLimages = new Array;
    var qLdone = 0;

    var qLimageContainer = "";
    var qLoverlay = "";
    var qLbar = "";
    var qLpercentage = "";
    var qLimageCounter = 0;

    var afterEach = function () {
        createPreloadContainer();
        createOverlayLoader();
    }

    var addImageForPreload = function(url) {
        var image = $("<img />").attr("src", url).bind("load", function () {
            completeImageLoading();
        }).appendTo(qLimageContainer);
    }

var completeImageLoading = function () {
qLdone++;

        var percentage = (qLdone / qLimageCounter) * 100;
        $(qLbar).stop().animate({
            width: percentage + "%"
        }, 200);

        if (qLoptions.percentage == true) {
            $(qLpercentage).text(Math.ceil(percentage) + "%");
        }

        if (qLdone == qLimageCounter) {
            destroyQueryLoader();
        }
    }

    var destroyQueryLoader = function () {
        $(qLimageContainer).remove();
        qLoptions.onLoadComplete();
    }

var findImageInElement = function (element) {
var url = "";

        if ($(element).css("background-image") != "none") {
            var url = $(element).css("background-image");
        } else if (typeof($(element).attr("src")) != "undefined" && element.nodeName.toLowerCase() == "img") {
            var url = $(element).attr("src");
        }

        if (url.indexOf("gradient") == -1) {
            url = url.replace(/url$\"/g, "");
            url = url.replace(/url\(/g, "");
            url = url.replace(/\"$/g, "");
            url = url.replace(/\)/g, "");

var urls = url.split(", ");

            for (var i = 0; i < urls.length; i++) {
                if (urls[i].length > 0) {
                    var extra = "";
                    if ($.browser.msie && $.browser.version < 9) {
                        extra = "?" + Math.floor(Math.random() * 3000);
                    }
                    qLimages.push(urls[i] + extra);
                }
            }
        }
    }

    $.fn.queryLoader2 = function(options) {
        if(options) {
            $.extend(qLoptions, options );
        }

        this.each(function() {
            findImageInElement(this);
            if (qLoptions.deepSearch == true) {
                $(this).find("*:not(script)").each(function() {
                    findImageInElement(this);
                });
            }
        });

afterEach();

return this;
};

})(jQuery);

首页 > 收集信息 > jQuery/Js/Css > 正文

分享一个jQuery的图片预加载插件 - QueryLoader2 --

如何使用

相关选项：

分享一个jQuery的图片预加载插件 - QueryLoader2 --