jquery - 使用 Galleria 幻灯片放映加载图像

Question

我正在使用 Galleria 将图像显示为幻灯片。当与网站的连接缓慢时，我遇到了显示图像的问题。Galleria 脚本在处​​理幻灯片放映之前等待在网站上加载完成的图像。所以我不知道如何配置 Galleria 脚本来实现幻灯片即时图像，而不是等待页面加载完成的图像。提前致谢

Answer 1

您可以使用单独的缩略图，因此加载速度会更快。

如果你有类似的东西

<div id="galleria">
    <img src="image1.jpg>
    <img src="image2.jpg>
...
</div>

它看起来像：

<div id="galleria">
    <a href="image1.jpg>
        <img src="thumb1.jpg>
    </a>
    <a href="image2.jpg>
        <img src="thumb2.jpg>
    </a>
...
</div>

您还可以使用thumbnails:lazy选项和 JSON 来提供数据。比你会有类似的东西

<div id="galleria"></div>
<script>
    var var data = [
        {
            thumb: 'thumb1.jpg',
            image: 'image1.jpg',  
        },
        {
            thumb: 'thumb2.jpg',
            image: 'image2.jpg',  
        },
        ...
    ]

    Galleria.configure({
        thumbnails:'lazy',
        dataSource:data
    });

    Galleria.ready(function(){
        this.lazyLoadChunks(3);//loads 3 thumbnails, and than another 3, ...
    });
</script>

参考：

http://galleria.io/docs/references/optimize/

http://galleria.io/docs/references/data/