JavaScript прелоадер

Тема в разделе "Другие языки", создана пользователем terkin, 11 авг 2008.

Статус темы:
Закрыта.
Модераторы: Цукер
  1. terkin

    terkin

    Регистр.:
    9 дек 2006
    Сообщения:
    513
    Симпатии:
    162
    Использую прелоадер что бы подгрузить большую картинку, всё работает отлично, вот только ИЕ6й вешает наглухо, подскажите в чём косяк, или пореккомендуйте другой способ прелоада

    PHP:
    <script type="text/javascript">

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

    //
    var loadImage = function(whurltarget) {
        var 
    img = new Image(wh);
        
    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>
     
  2. Black#FFFFFF

    Black#FFFFFF

    Регистр.:
    19 июл 2007
    Сообщения:
    176
    Симпатии:
    103
    Все просто. В ИЕ 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);
    
    а не наоборот:)
     
    Casper_R нравится это.
  3. McLaren

    McLaren

    Регистр.:
    8 май 2007
    Сообщения:
    155
    Симпатии:
    20
    есть JS-ILOADER (v1.1) www.gerd-tentler.de/tools
    во всех браузерах работает норм а вот в IE8 просто вечно весит гифик лоадинг даже после окончания загрузки - может глянете кто знает что можно с этим сделать
    очень нужно :thenks:

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