Preloader do ładowania obrazków, images - pokazuje obracajace się kuleczko (dowolny gif) na każdej miniaturce obrazka podczas ładowania:
Demo:
demo preloader - może zaistnieć, że trzeba będzie odswieżyć stronę bo wstawione są duże obrazki dla demonstracji
Opis:
opis images preloader - artykuł
Gotowy kod strony:
należy wstawić plik preloader.js do kodu html: <script type="text/javascript" src="preloader.js"></script>
oraz w stylach ewentualni zmienić ścieżkę dostepu do loading.gif: background: url(images/loading.gif) no-repeat center;
Loadery, grafiki są dostępne
Ajax Indicators<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <script type="text/javascript"> window.addEvent('domready', function() {
var p = new Preloader();
$$('.preloadImage img').each(function(img) {
p.addEventOnLoad(img.src, function() {
img.getParent().setStyle('background', 'none');
img.setStyle('opacity', 0)
img.style.display = 'block';
img.effect('opacity').start(0,1);
});
p.addToQueue(img.src);
});
});
body {
font-family: Arial, Helvetica, sans-serif;
background-color:#efefef;
}
#main {
background: #fff;
width: 550px;
padding: 25px 0 25px 25px;
margin: 25px auto;
overflow: hidden;
}
.preloadImage {
background: url(images/loading.gif) no-repeat center;
float: left;
margin: 25px 25px 0 0;
}
.preloadImage, .preloadImage img {
width: 250px;
height: 166px;
}
.preloadImage img {
display: none;
}
h1 { font-size:16px; color:#333333;}
p { font-size:12px;}
Please note: Every image in the demo is about 500kb.
<div class="preloadImage"><img src="images/01.jpg" title="sample1" alt="" /></div> <div class="preloadImage"><img src="images/02.jpg" title="sample2" alt="" /></div> <div class="preloadImage"><img src="images/03.jpg" title="sample3" alt="" /></div> <div class="preloadImage"><img src="images/04.jpg" title="sample4" alt="" /></div>
Plik preloader.js
Kod
/* Class:
Preloader
Author:
Neil Jenkins
Version:
1.0 (2007-09-06)
Description:
Javascript class for preloading images sequentially
Usage:
Calling new Preloader() returns an new Preloader instance.
e.g. var p = new Preloader();
Public interfaces:
addToQueue(String: imageSrc)
This method adds the imageSrc to the back of the queue.
e.g. p.addToQueue('img.jpg');
addToFrontOfQueue(String: imageSrc)
This method adds the imageSrc to the front of the queue; it will be loaded next,
before any other images currently in the queue.
e.g. p.addToFrontOfQueue('img.jpg');
removeFromQueue(String: imageSrc)
This method removes the imageSrc from the queue if it is not already loaded.
e.g. p.removeFromQueue('img.jpg');
addEventOnLoad(String: imageSrc, Function: callbackFunction)
This method adds a function to be called when the image with source imageSrc loads,
The function will be bound to the image object (i.e. the keyword 'this' will refer to the image).
e.g. p.addEventOnLoad('img.jpg', functionToShowThisImage);
flushQueue()
Removes all images yet to be loaded from the queue
stopAllEvents()
Removes all events set with addEventOnLoad; even if the image loads, no event
will fire unless you add a new one.
isLoaded(String: imageSrc)
Returns a boolean value indicating whether the image from this source has loaded.
isInQueue(String: imageSrc)
Returns true if the image is in the queue or is currently being loaded.
Otherwise returns false.
priorityLoadWithCallback(String: imageSrc, Function: callbackFunction)
Adds the image to the front of the queue and registers the callback function to fire when the
image has loaded. If the image is already loaded, the function will be called immediately.
Returns true if the image is already loaded, false if not.
Dependencies:
mootools: http://mootools.net
*/
var Preloader = new Class({
initialize: function() {
this._currentlyLoading = '';
this._loading = false;
this._imgQueue = [];
this._loadEvents = {};
this._loadedImages = {};
},
addToQueue: function(src) {
if (this.isLoaded(src) || this.isInQueue(src)) return;
this._imgQueue.push(src);
if (!this._loading) this._loadNext();
return this;
},
addToFrontOfQueue: function(src) {
if (this.isLoaded(src)) return false;
if (this._currentlyLoading == src) return true;
this.removeFromQueue(src);
this._imgQueue.unshift(src);
if (!this._loading) this._loadNext();
return true;
},
removeFromQueue: function(src) {
this._imgQueue.remove(src)
return this;
},
addEventOnLoad: function(src, fn) {
this._loadEvents[src] = fn;
return this;
},
flushQueue: function() {
this._imgQueue = [];
return this;
},
stopAllEvents: function() {
this._loadEvents = {};
return this;
},
isLoaded: function(src) {
return !!this._loadedImages[src];
},
isInQueue: function(src) {
return (this._currentlyLoading == src || this._imgQueue.contains(src));
},
priorityLoadWithCallback: function(src, fn) {
this.addEventOnLoad(src, fn);
if (!this.addToFrontOfQueue(src)){
this._fireLoadEvent(src); // Already loaded
return true;
}
return false;
},
_fireLoadEvent: function(src) {
if (this._loadEvents[src]) this._loadEvents[src].call(this._loadedImages[src]);
this._loadEvents[src] = null;
},
_loadNext: function() {
if (this._imgQueue.length == 0) {
this._currentlyLoading = '';
return this._loading = false;
}
this._loading = true;
this._currentlyLoading = this._imgQueue.shift();
var img = new Element('img');
var preloader = this;
img.addEvent('load', function() {
preloader._loadedImages[this.src] = this;
preloader._currentlyLoading = '';
preloader._fireLoadEvent(this.src);
setTimeout(function() {
preloader._loadNext();
}, 0); //setTimeout for Opera; stops this hogging the javascript thread.
this.removeEvent('load', arguments.callee);
});
img.src = this._currentlyLoading;
}
});
