jquery - 需要一些帮助编码画廊/投资组合

Question

我尝试托管我的 WIP 网站以查看它是如何工作的。一切顺利，除了以下内容：在我的投资组合页面上： 投资组合

我在 jquery 中编写了一个“画廊”。当页面开始加载时，浏览器似乎加载了#portfolioSlider应该显示的 div：none 直到触发。它包含大量图像，导致加载时间很长，直到缩略图 ( #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>