Нужна помощь в кодировании галереи / портфолио

Question

Я попытался разместить свой сайт WIP, чтобы посмотреть, как он работает.Все идет хорошо, за исключением следующего: На моей странице портфолио: Портфолио

Я кодировал «галерею» в jquery.Когда страница начинает загружаться, кажется, что браузер загружает #portfolioSlider div, который должен отображаться: ни один, пока не сработает.Он содержит много изображений, что приводит к значительному времени загрузки, пока не начнут загружаться эскизы (#Portfolio).

Как заставить #portfolioSlider загружать изображения только после его открытия?

Спасибозаранее!

Answer 1

Вместо заполнения атрибута src по умолчанию поместите URI изображения в атрибут данных. Пример:

<img src="" data-imageSrc="your/uri/to/image.gif" />

Затем, когда вы хотите загрузить его, переместите данные в src:

$('img').attr('src',$(this).data('imageSrc'));

Answer 2

только чтобы дать идею ....

<div id="galery"><img/></div><script>
var datas={
        "images":[{ 
                    "src":"gallery/panorak.jpg",
                    "title":"PANORAK",
                    "date":"28/10/2010 Web Design",
                    "description":"desc"
                    "id":"panorak"
                    }, 
                    "src":"gallery/panorak.jpg",
                    "title":"PANORAK",
                    "date":"28/10/2010 Web Design",
                    "description":"desc"
                    "id":"panorak"
                    }, 
                ]}
$(document).ready(function(){
var galPlace=$("#galery")

    var list=$("<ul/>");
    galPlace.append(list);
datas.images.each(function(i,j){
    list.prepend($("<li/>").$("<img/>").attr("src",datas.images[i].src).load(function(){ })));
} 
);}); 
</script>