Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > JavaScript: Общие вопросы > Preloader картинки и вставка ее в background-image

Автор: Zuzzuk 9.12.2009, 17:57

Здравствуйте.
Есть такая проблема - , на блоке стоит background-image размером с 1.5 мега и по этому сама картинка грузится очень долго.
По этому я решил сделать точную копию картинки, но с минимальным качеством, потом проверять загрузилась ли оригинальная картинка и менять ее сразу, как только она загрузилась.
Получилось вот что

Код


<script type='text/javascript'>
bgPreloader = function(picUrl, containerId){    
    var mainBlockBgChange = function(){
        if(!containerId) return false;
        mainBlock = document.getElementById(containerId);                
        mainBlock.style.backgroundImage = 'url(' + preloaderPic.src + ')';
    }
    
    preloaderPic = new Image()
    preloaderPic.src = picUrl;
    preloaderPic.onload = mainBlockBgChange;
        
}('images/mainBg.jpg', 'mainBlock')
</script>

mainBlockBgChange срабатывает сразу, как только picUrl загрузился, но к сожалению через firebug видно, что он качает ее еще раз, что бы поставить на background-image... ((
Может быть есть какой-нибудь способ?
Спасибо

Автор: brother79 10.12.2009, 06:33

А если попробовать 2 дива друг за другом поставить, пока большая не загрузится - будет видно маленькую, как большая подгрузится - она перекроет маленькую. Разметку рисовать не буду, поди справишься, только идею могу предложить smile

Автор: Zuzzuk 10.12.2009, 12:49

Да, спасибо за идею, я примерно так и сделал - на html поставил.
Просто думал, что есть какое-нибудь более элегантное решение.

Автор: brother79 10.12.2009, 13:00

Цитата(Zuzzuk @ 10.12.2009, 12:49

)

Мне казалось, что если можно обойтись без всяких там js и обработки событий, куда уж более элегантное решение может быть? Тебе так и так грузить обе картинки.