JavaScript прелоадер

terkin · 11 Авг 2008

Использую прелоадер что бы подгрузить большую картинку, всё работает отлично, вот только ИЕ6й вешает наглухо, подскажите в чём косяк, или пореккомендуйте другой способ прелоада

PHP:

<script type="text/javascript">

var bgImage = "images/ajax-loader.gif";
var bgRepeat = "no-repeat";
var bgPosition = "center center";

//
var loadImage = function(w, h, url, target) {
	var img = new Image(w, h);
	img.src = url;
	img.style.visibility = "hidden";
	var molde = document.createElement("div");
	molde.setAttribute("id", "molde");
	var style = molde.style;
	style.background = " url("+bgImage+") "+bgRepeat+" "+bgPosition;
	style.width = img.width+"px";
	style.height = img.height+"px";
	document.getElementById(target).appendChild(molde);
	molde.appendChild(img);
	img.onload = function() {
		this.style.visibility = "visible";

	}
}

</script>
</head>

<body>

          <div id="frontpage-bg"></div>
       
<script type="text/javascript">
var imagem = new loadImage(925, 566, "images/frontpage.png", "frontpage-bg");
</script>
</body>

Black#FFFFFF · 20 Авг 2008

Все просто. В ИЕ 6.0 не наступает событие onload для рисунка:
Как выход - будет работать следующее:

HTML:

<html>
<head>
<script type="text/javascript">

var bgImage = "2.jpg";
var bgRepeat = "no-repeat";
var bgPosition = "center center";

//
var loadImage = function(w, h, url, target) {
    var img = new Image(w, h);
    img.style.visibility = "hidden";
    img.src                = url;
    var molde            = document.createElement("div");
    molde.setAttribute("id", "molde");
    var style = molde.style;
    style.background = " url("+bgImage+") "+bgRepeat+" "+bgPosition;
    molde.appendChild(img);
    document.getElementById(target).appendChild(molde);
	var timer = false;
        timer     = setInterval(function(){
            if(img.width>0&&img.height>0){
            style.width = img.width+"px";
	 	    style.height = img.height+"px";
    		clearInterval(timer);
               img.style.visibility = "visible";
             
            }

        },30);
}



</script>
</head>

<body>

          <div id="frontpage-bg"></div>

<script type="text/javascript">
var imagem = new loadImage(925, 566, "2.jpg", "frontpage-bg");
</script>
</body>
</html>

Т.е. мы "смотрим" по интервальному событию - не возникли ли длинна и высота у нашей картинки, коли возникли - картинка загрузилась. Значит мы ее показываем.
(Еще, ремарки, или "как удобнее" - если создаешь динамически элементы - связывай их от дочернего к родительскому: т.е.

HTML:

molde.appendChild(img);
document.getElementById(target).appendChild(molde);

а не наоборот

McLaren · 8 Окт 2009

есть JS-ILOADER (v1.1) Для просмотра ссылки Войди или Зарегистрируйся
во всех браузерах работает норм а вот в IE8 просто вечно весит гифик лоадинг даже после окончания загрузки - может глянете кто знает что можно с этим сделать
очень нужно :thenks:

Либо подскажите скрипт прелоадера но не только для одной картинки а для всей старнички - а на ней штук 40 превьюшек (галерея)

JavaScript прелоадер

terkin

Мой дом здесь!

Black#FFFFFF

Постоялец

McLaren

Местный житель