MyGit

Gaya/queryloader2

Fork: 230 Star: 718 (更新于 2024-11-26 12:21:33)

license: MIT

Language: JavaScript .

Version of the QueryLoader by Gaya Kessler. Preload images with ease.

最后发布版本: 3.2.0 ( 2016-05-10 15:13:08)

官方网址 GitHub网址

QueryLoader2

QueryLoader2 serves the main purpose of pre-loading the images on your website by showing an overlay and a loading bar. It automatically fetches all your images and background images and pre-loads them before showing the web page.

Code Climate Build Status

Compatibility

QueryLoader currently works in IE version 9+, Chrome, Safari and Firefox.

No dependencies, so no jQuery / Zepto / MooTools required.

Read the full post here: http://blog.gaya.ninja/articles/queryloader2-preload-your-images-with-ease/

View example of how QueryLoader2 works.

Example usage

Include the queryloader2.min.js script (which is in the root of this repository) in the head section of your webpage.

<script src="queryloader2.min.js" type="text/javascript"></script>

Create a QueryLoader2 object like this for example:

<script type="text/javascript">
    window.addEventListener('DOMContentLoaded', function() {
        QueryLoader2(document.querySelector("body"), {
            barColor: "#efefef",
            backgroundColor: "#111",
            percentage: true,
            barHeight: 1,
            minimumTime: 200,
            fadeOutTime: 1000
        });
    });
</script>

Use with NPM / Browserify

First install QueryLoader as a dependency in your project:

npm install queryloader2 --save-dev

Use it in a node / browserify project:

var QueryLoader2 = require("queryloader2");

var loader = QueryLoader2(document.querySelector("body"), {
	barColor: "#efefef",
	backgroundColor: "#111",
	percentage: true,
	barHeight: 1,
	minimumTime: 200,
	fadeOutTime: 1000
});

jQuery usage

Include jQuery and queryloader2.min.js scripts in the header.

<script src="https://code.jquery.com/jquery-1.11.1.min.js" type="text/javascript"></script>
<script src="queryloader2.min.js" type="text/javascript"></script>

Call QueryLoader in $(document).ready() like this:

$(document).ready(function () {
	$("body").queryLoader2();
});

Install using Bower

bower install queryloader2

Basic usage

QueryLoader2(element, options);

Options

backgroundColor string background color of the loader (in hex). Default: "#000"

barColor string background color of the bar (in hex). Default: "#FFF"

barHeight int height of the bar in pixels. Default: 1

minimumTime int time in miliseconds which the loading has to run. If time has not passed the animation will still show. Default: 500

maxTime int maximum time in milliseconds the loader may take. Go past this time and the loader with automatically close. Default: 10000

fadeOutTime int time in miliseconds it takes for the overlay to fade out at the end. Default: 1000

deepSearch boolean set to true to find ALL images with the selected elements. If you don't want queryLoader to look in the children, set to false. Default: true

percentage boolean Set to true to enable percentage visualising. Default: false

onComplete function this function is called once the loading and animation are completed. Default: none

onProgress function this function is called when an image is loaded. Get parameters percentage, imagesLoaded, totalImages. Default: none

最近版本更新:(数据更新于 2024-09-14 21:25:02)

2016-05-10 15:13:08 3.2.0

2015-06-06 22:45:21 3.0.15

2015-02-24 20:51:06 3.0.9

2014-09-25 16:51:38 3.0.6

2014-09-19 00:36:51 3.0.4

2014-08-28 03:27:57 3.0.3

2014-02-01 03:46:36 2.9.0

2013-12-05 20:12:36 2.8.3

Gaya/queryloader2同语言 JavaScript最近更新仓库

2024-12-22 13:19:55 gethomepage/homepage

2024-12-22 11:34:40 chris81605/Degrees-of-Lewdity_Cheat_Extended

2024-12-22 00:44:14 gorhill/uBlock

2024-12-21 12:14:02 layui/layui

2024-12-21 03:44:01 emberjs/ember.js

2024-12-20 02:57:09 nodejs/node