Помощь в загрузке галереи изображений / Как загрузить изображения на лету, после срабатывания? - PullRequest
Новая
       12

Помощь в загрузке галереи изображений / Как загрузить изображения на лету, после срабатывания?

0 голосов
/ 31 июля 2011

У меня есть галерея, похожая на эту JulienPons .Все работает нормально, но когда я загружаю страницу, она получает огромное время загрузки.Полноэкранные изображения загружаются перед эскизами и элементами div.Как сделать так, чтобы изображения и видео загружались только после нажатия на миниатюру?

ps.Я использую значение href, чтобы назначить div слайдера изображения, затем использую .toggle (), чтобы изменить слайдер # для каждого эскиза.

Обновление 

    <div id="featured">

            <!-- PROJECT START --><div id="dubstep" class="project">
            <ul>                
<li class="img1"><img src="gallery/dubstep-1.jpg" alt="Css Template Preview" width="940" height="529"/></li>
<li class="img2"><img src="gallery/dubstep-2.jpg" alt="Css Template Preview" width="940" height="529"/></li>        
<li class="img3"><img src="gallery/dubstep-1.jpg" alt="Css Template Preview" width="940" height="529"/></li>
<li class="iframe"><img src="gallery/dubstep-1.jpg" alt="Css Template Preview" width="940" height="529"/></li>
            </ul>
           </div><!-- PROJECT END -->
    </div>

Я хочу, чтобы эти изображения загружались толькопосле того, как я нажму на div большим пальцем класса.Теперь они загружаются вместе с документом, что значительно увеличивает время загрузки. 

    <div id="portfolio">
    <div id="thumbnails">

        <!--THUMBNAIL START --><div class="thumb" id="dubstep-thumb"><a href="#dubstep">
        <img src="thumbs/dubstep-bwthumb.jpg" alt="" width="300" height="169"/>
        </div><!--THUMBNAIL END -->

    </div>
    </div>

1 Ответ

1 голос
/ 31 июля 2011

дайте идентификатор каждому из ваших изображений и установите для их src маленький 1x1 dummy.gif: 

<img id="image1" src="dummy.gif" alt="Css Template Preview" width="940" height="529"/>

добавьте атрибут onclick к вашему div-элементу большого пальца: 

<div class="thumb" id="dubstep-thumb" onclick="loadImage( 1 )">

определить loadImage () в вашем <head> следующим образом: 

function loadImage( id ) {
    var image = document.getElementById( 'image'+id );
    image.setAttribute( 'src', 'gallery/dubstep-'+id+'.jpg' );
}
...