Шустрый
Профиль
Группа: Участник
Сообщений: 60
Регистрация: 11.6.2006
Где: Kiev
Репутация: 1
Всего: 1
|
Вот пришлось сделать прозрачный настраиваемый прелоадер страницы, который отображает реальную картину загрузки изображений. Хорошо подходит для фотогалерей и страниц с большим количеством графики одного размера. Текст файла preload.js : | Код |
var loaderWidth = 100;
var loaderHeight = 40;
var bord = 2;
var bordColor = '#655775';
var loaderColor = '#ffffff';
var barColor = '#850505';
var transp = 70;
var texColor = '#050607';
var texFam = "verdana";
function lib_bwcheck() {
this.ver = navigator.appVersion;
this.agent = navigator.userAgent;
this.dom = document.getElementById ? 1 : 0;
this.opera = this.agent.indexOf("Opera") > - 1;
this.ie5 = (this.ver.indexOf("MSIE 5") > - 1 && this.dom && !this.opera5) ? 1 : 0;
this.ie6 = (this.ver.indexOf("MSIE 6") > - 1 && this.dom && !this.opera5) ? 1 : 0;
this.ie4 = (document.all && !this.dom && !this.opera5) ? 1 : 0;
this.ie = (this.ie4 || this.ie5 || this.ie6) && !this.opera5;
this.mac = this.agent.indexOf("Mac") > - 1;
this.ns6 = (this.dom && parseInt(this.ver) >= 5) ? 1 : 0;
this.ns4 = (document.layers && !this.dom) ? 1 : 0;
this.bw = (this.ie6 || this.ie5 || this.ie4 || this.ns4 || this.ns6 || this.opera5);
return this
}
//-------------------------------------------------------------------------
var bw = new lib_bwcheck();
var numImages = 0;
var currentImg = 0;
var px = bw.ns4 || window.opera ? "" : "px";
function lib_doc_size() {
this.x = 0;
this.x2 = screen.width || bw.ie && document.body.offsetWidth - 20 || innerWidth || 0;
this.y = 0;
this.y2 = screen.height || bw.ie && document.body.offsetWidth - 20 || window.innerHeight || 0;
if (!this.x2 || !this.y2)
return message('Document has no width or height');
this.x50 = this.x2 / 2;
this.y50 = this.y2 / 2;
return this;
}
//-------------------------------------------------------------------------
function lib_obj(obj, nest) {
nest = (!nest) ? "" : 'document.' + nest + '.';
this.evnt = bw.dom ? document.getElementById(obj): bw.ie4 ? document.all[obj]: bw.ns4 ? eval(nest + "document.layers." + obj): 0;
this.css = bw.dom || bw.ie4 ? this.evnt.style : this.evnt;
this.ref = this.css;
this.w = this.evnt.offsetWidth || this.css.clip.width || this.ref.width || this.css.pixelWidth || loaderWidth * 8 / 10;
return this
}
//-------------------------------------------------------------------------
lib_obj.prototype.moveIt = function(x, y) {
this.x = x;
this.y = y;
this.css.left = x + px;
this.css.top = y + px;
}
//-------------------------------------------------------------------------
lib_obj.prototype.clipTo = function(t, r, b, l, setwidth) {
this.ct = t;
this.cr = r;
this.cb = b;
this.cl = l;
if (bw.ns4) {
this.css.clip.top = t;
this.css.clip.right = r;
this.css.clip.bottom = b;
this.css.clip.left = l;
} else {
if (t < 0)
t = 0;
if (r < 0)
r = 0;
if (b < 0)
b = 0;
if (l < 0)
l = 0;
this.css.clip = "rect(" + t + "px " + r + "px " + b + "px " + l + "px)";
if (setwidth > 0) {
if (setwidth == 1) {
r = r - 2 * bord;
b = b - 2 * bord
};
if (b < 0)
b = 0;
if (r < 0)
r = 0;
this.css.pixelWidth = r;
this.css.pixelHeight = b;
this.css.width = r + px;
this.css.height = b + px;
if (setwidth == 2)
this.css.top = '1px';
}
}
}
//-------------------------------------------------------------------------
var oLoad2;
function startLoading() {
setStyle("divLoad1", "position", "absolute");
setStyle("divLoad2", "position", "absolute");
setStyle("divLoadText", "position", "absolute");
setStyle("divLoadText", "fontFamily", texFam);
setStyle("divLoadText", "color", texColor);
setStyle("divLoadText", "fontSize", "12" + px);
setStyle("divLoad1", "filter", "alpha(opacity=" + transp + ")");
setStyle("divLoad1", "opacity", transp / 100);
setStyle("divLoad1", "-moz-opacity", transp / 100);
setStyle("divLoad1", "border", "solid");
setStyle("divLoad1", "borderWidth", bord + px);
setStyle("divLoad1", "borderColor", bordColor);
setStyle("divLoad1", "backgroundColor", loaderColor);
setStyle("divLoad2", "backgroundColor", barColor);
setStyle("divLoad1", "display", "block");
setStyle("divLoad2", "display", "block");
setStyle("divLoadText", "display", "block");
page = new lib_doc_size();
oLoad = new lib_obj('divLoad1');
oLoad2 = new lib_obj('divLoad2', 'document.divLoad1');
oLoadText = new lib_obj('divLoadText', 'document.divLoad1');
oLoad.moveIt(page.x50 - loaderWidth / 2, page.y50 - 20);
oLoadText.moveIt(loaderWidth / 2-oLoadText.w / 2, 15);
oLoad.clipTo(0, loaderWidth + bord * 2, loaderHeight + bord * 2, 0, 1);
oLoad2.per = numImages > 0 ? loaderWidth / numImages: loaderWidth;
}
//-------------------------------------------------------------------------
function loadIt(nu) {
currentImg = currentImg + nu;
if (oLoad2)
oLoad2.clipTo(3, oLoad2.per * currentImg - 3, 11, 3, 2);
if (currentImg >= numImages) {
loaderHide();
}
}
//-------------------------------------------------------------------------
function loaderHide() {
setStyle("divLoad1", "display", "none");
setStyle("divLoad2", "display", "none");
setStyle("divLoadText", "display", "none");
}
//-------------------------------------------------------------------------
function d(id) {
var itm = null;
if (document.getElementById) {
itm = document.getElementById(id);
} else if (document.all) {
itm = document.all[id];
} else if (document.layers) {
itm = document.layers[id];
}
return itm;
}
//-------------------------------------------------------------------------
function setStyle(element, styl, value) {
element = d(element);
if (element.style) {
element.style[styl] = value
} else {
element[styl] = value
}
}
//-------------------------------------------------------------------------
function getStyle(el, styleProp) {
var x = d(el);
if (x.style[styleProp]) {
var y = x.style[styleProp];
} else if (x.currentStyle) {
var y = x.currentStyle[styleProp];
} else if (window.getComputedStyle) {
var compStyle = window.getComputedStyle(x, "");
var y = compStyle.getPropertyValue(styleProp);
}
return y;
}
//-------------------------------------------------------------------------
function getByClass(tag, theClass) {
ccollect = new Array();
var inc = 0;
var allPageTags = document.all ? document.all : document.getElementsByTagName(tag.toUpperCase());
for (i = 0; i < allPageTags.length; i++)
if (allPageTags[i].nodeName == tag.toUpperCase()) {
if (allPageTags[i].className == theClass) {
ccollect[inc++] = allPageTags[i];
}
numImages = inc;
}
}
//-------------------------------------------------------------------------
function addEv() {
var inc = 0;
while (ccollect[inc]) {
ccollect[inc].onabort = function(ev) {
loaderHide();
}
ccollect[inc].onload = function(ev) {
loadIt(1);
}
inc++
}
}
//-------------------------------------------------------------------------
document.onstop = function() {
loaderHide();
}
|
В конце страницы нужно добавить: | Код |
<div id="divLoad1">
<div id="divLoad2"></div><br>
<div id="divLoadText">Loading...</div>
</div>
<script type="text/javascript">
getByClass("img","iphoto");
startLoading();
addEv();
</script>
|
И каждому большому рисунку дать одинаковое имя класса, в даном случае class="iphoto". Буду благодарна за дельные дополнения или идеи более элигантного решения этой задачи. Пример работы прогрессбара можно посмотреть сдесь: http://www.conrill.kiev.ua/photo.html (~90 Kb) Это сообщение отредактировал(а) 12345c - 12.10.2006, 22:09 |
progressbar загрузки html, еще один вариант реализации 
Загрузка ...
sample.rar 72,33 Kb
