Скрыть содержание Загрузка Gif - PullRequest
Новая
       18

Скрыть содержание Загрузка Gif

0 голосов
/ 30 марта 2011

У меня есть два больших файла изображения в div на странице, загрузка которых занимает несколько секунд.Как я могу скрыть загружаемый контент, когда появляется «загрузочный gif», а затем отображать его после полной загрузки?

Я действительно ничего не знаю о javascript, но я пытался использовать этот код.Он сделал половину того, что я хотел.«Загрузка GIF» работал, но проблема была в том, что содержимое было видно во время загрузки.

http://aaron -graham.com / test2.html 

<div id="loading" style="position:absolute; width:95%; text-align:center; top:300px;">
        <img src="img/parallax/ajax-loader.gif" border=0>
</div>
    <script>
        var ld=(document.all);
        var ns4=document.layers;
        var ns6=document.getElementById&&!document.all;
        var ie4=document.all;
        if (ns4)
        ld=document.loading;
        else if (ns6)
        ld=document.getElementById("loading").style;
        else if (ie4)
        ld=document.all.loading.style;
        function init()
        {
        if(ns4){ld.visibility="hidden";}
        else if (ns6||ie4) ld.display="none";
        }
    </script>

Любая помощь будет принята с благодарностью!

Ответы [ 2 ]

0 голосов
/ 30 марта 2011

Работая над вашей HTML-структурой, я добавил класс notifyLoaded для двух изображений, чтобы вы могли наблюдать, когда оба загрузятся с помощью события onload.Поскольку фоновые изображения css не получают это событие, я создал скрытое изображение, используя путь к фону, чтобы мы могли проверить, загружено ли это изображение

HTML: 

<div id="loading"> 
        <img src="http://aaron-graham.com/img/parallax/ajax-loader.gif" border="0" /> 
    </div> 

    <div id="vertical"> 
        <div> 
            <div class="panel"> 
                <img class="notifyLoaded" src="http://aaron-graham.com/img/parallax/tile3.png" /> 
            </div> 
        </div> 
    </div>

    <div id="imgLoader">
        <img class="notifyLoaded" src="http://aaron-graham.com/img/parallax/deepspace3.jpg" alt="" />
    </div>

У вас есть ссылкана jQuery на вашей странице уже, поэтому я заменил ваш скрипт на следующее.

jQuery: 

$(document).ready(function() {
    var $vertical = $('#vertical');
    var $imgs = $('.notifyLoaded');
    var imgCount = $imgs.length;
    var imgLoadedCount = 0;

    $vertical.backgroundparallax(); // Activate BG Parallax plugin

    $imgs.load(function() {
        console.log(this);
        imgLoadedCount++;
        if (imgCount == imgLoadedCount) {
            // images are loaded and ready to display
            $vertical.show();
            // hide loading animation
            $('#loading').hide();
        }
    });
});

Я также установил #Vertical по умолчанию display:none;, который изменяетсякогда изображения загружены

CSS: 

body {background-color:black;}
#loading {position:absolute;width:95%;text-align:center;top:300px;}
#vertical {display:none;background-image: url('http://aaron-graham.com/img/parallax/deepspace3.jpg');background-position: 0 0;height: 650px;width: 900px;overflow: auto;margin:35px auto auto auto;}
#vertical > div {margin: 0;color: White;}
#vertical .panel {padding: 100px 5%;margin-left:40px;height: 3363px;}
#imgLoader {display:none;}
0 голосов
/ 30 марта 2011

Используйте jquery, с кодом, подобным: 

$(document).ready(function(){
    $('#pic1').attr('src','http://nyquil.org/uploads/IndianHeadTestPattern16x9.png');
});

С html-кодом: 

<img id="pic1" />

Работает, когда вызывается функция готовности документа (которая вызывается после DOMи другие ресурсы были созданы), тогда он назначит атрибут src img с URL-адресом изображения, которое вы хотите.
Измените URL-адрес nyquil.org на изображение, которое вы хотите, и добавьте столько, сколько необходимо (просто не ходитеза борт ;).Протестировано Firefox 3 / chrome 10.

Вот демоверсия: http://jsfiddle.net/mazzzzz/Rs8Y9/1/

...