갤러리/포트폴리오 코딩에 도움이 필요합니다.

Question

어떻게 작동하는지 WIP 웹 사이트 호스팅을 시도했습니다. 내 포트폴리오 페이지에서 : 모든 것이 잘 다음을 제외하고 간다 Portfolio

나는 JQuery와의 "갤러리"를 코딩했다. 페이지로드가 시작될 때 브라우저가 표시 될 것으로 예상되는 #portfolioSlider div를로드하는 것처럼 보입니다. 미리보기 이미지 (#Portfolio)로드가 시작될 때까지 많은로드 시간을 초래하는 많은 이미지가 포함되어 있습니다.

#portfolioSlider 이미지를 열면 어떻게 시작하나요?

미리 감사드립니다.

Answer 1

는 아이디어를주고 ....

<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> 

Answer 2

기본적으로 src 특성을 채우는 대신 이미지의 URI를 데이터 특성에 넣으십시오. 예 : 다음

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

, 당신이 그것을로드 SRC로 데이터를 이동하고자 할 때 :

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