Прелодінг

Ви вже мабуть помітили, яка прикольна фішечка з’явилася у мене на сайті і нервує вас щоразу, коли ви чекаєте завантаження чергової сторінки. Це зроблено для того, аби приховати від відвідувача процеc підвантаження графіки та формування сторінок.

Зробити це, як завжди, дуже просто 🙂 за помогою невеличкого джава-скрипта:

function showpage() {
document.getElementById('loader').style.display = "none";
document.getElementById('main').style.display = "block";
}



<div style="height:100%;width:100%" id="loader">
Сюди тулимо те що має бачити відвідувач в той
момент, коли сторінка ще вантажиться
</div>
<div style="height:100%;width:100%" id="main">
Сюди вставляємо власне код сторінки
</div>
  • ото тепер зявляться сайти з прелоудами )

  • fryevhen, треба було хоч смайлик втулити аби я зрозумів до чого ти хилиш…

  • Класно! Беру собі 🙂

  • Але вважай, що якщо в тебе на сайті є якісь елементи, що вантажаться зі сторонього джерела і з завантаженням якого може виникнути трабла, то прелодінг так і буде висіти… Треба ше урізноманітнити скрипт і взнати в спеців-джаваскриптерів як виставити тайм-аут…

  • Вже почалося )

    тепер тільки рахуй сайти хто собі таке поставить )

  • та ну, побавляться дітки пару днів і все. Он в мене наприклад шатеррелоад перестав працювати через це…

  • Як на мене, цікава і корисна штука. А якщо цікава і корисна, чом би не додати? 🙂

  • я колись юзав простіший спосіб: осьо отут http://nema.org.ua/. зможеш витягнути – давай

  • Ну куди ж уже простіше? Чьо ж не зможу? Просто мене і цей влаштовує…

  • fryevhen, витягнув. Дякую!

    Скрипт

    function hideLoading() {
    document.getElementById(‘pageIsLoading’).style.display = ‘none’;
    }

    Код одразу після відкриття body:
    div id=”pageIsLoading” style=”position:fixed;
    display: block;
    width: 100%;
    height: 100%;
    color:#000000;
    font-weight:bold;
    background-color:white;
    background-image: url(throbber.gif);
    background-position: center;
    background-repeat: no-repeat;”
    //закрити дів!

  • твій “покрасівши” ніж мій, але зато у мене не сильно привязано до інших ява скриптів на сторінці. то єсть – тошо ти і казав.

  • Та всьо, всьо, ти переміг! )))

  • А навіщо воно треба? хіба що – трохи погратися…
    Мене особисто не бентежить споглядання підвантаження малюнків. Бо ж тим часом я вже можу знайомитись з текстом, а не дивитися на бігаючу смужку..
    Чи є якийсь прихований від мене зміст? )))