需要一些帮助编码画廊/投资组合答案

【问题标题】：Need some help coding a gallery / portfolio需要一些帮助编码画廊/投资组合
【发布时间】：2011-09-27 17:22:49
【问题描述】：

我已尝试托管我的 WIP 网站以了解其工作原理。一切顺利，除了以下几点：在我的投资组合页面上： Portfolio

我在 jquery 中编写了一个“画廊”。当页面开始加载时，浏览器似乎加载了 #portfolioSlider div，它应该是 display:none 直到触发。它包含大量图像，导致加载时间很长，直到缩略图 (#Portfolio) 开始加载。

如何让#portfolioSlider 图片只有在打开后才开始加载？

提前致谢！

【问题讨论】：

标签： jquery css ajax gallery portfolio

【解决方案1】：

默认情况下不要填充src 属性，而是将图像的URI 放在数据属性中。示例：

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

然后，当您要加载它时，将数据移动到 src 中：

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

【讨论】：

我要补充一点，这还允许您在后台加载图像。

【解决方案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>

【讨论】：