Question

我有一个包含65张图片的小型画廊网站。我用幻灯片创建了一个简单的html页面。网站加载速度很慢。此外，图像在尝试访问时加载速度非常慢。您有什么推荐的吗？

以下是我加载图片的方式。

<p>
    <a href="javascript:void(viewer.show(0))" alt="Launch slideshow" class="m-btn">Launch Slideshow</a>
</p>
<p>
    <script type="text/javascript">
        var img;                    
        var images = []; // created from loop
        var viewer = new PhotoViewer();
        for(var j = 1; j < 69; j++){
            var fullImg = '/image_'+ ("000" + j).slice(-3) +'.JPG';
            viewer.add('photos/image_' + ("000" + j).slice(-3) + '.JPG');   
            images.push(fullImg);                   
        }
        var mastercontainer=document.createElement("div");
        mastercontainer.setAttribute('class','mastercontainer');


        var main=document.createElement("div");
        main.setAttribute('class','main');


        var slidesDiv=document.createElement("div");
        slidesDiv.setAttribute('class','slideshow');

        document.body.appendChild(mastercontainer); 
        document.body.appendChild(main);                
        document.body.appendChild(slidesDiv);

        for (var i in images) {
            var num = parseInt(i);
            var img=document.createElement("img");
            img.setAttribute('src', 'photos/thumbnail'+images[num]);
            img.setAttribute('width', 200);
            img.setAttribute('height', 200);
            img.setAttribute('style', 'margin-left:10px;margin-right:10px;margin-top:20px;margin-bottom:0px;border:1px solid #000000;border-radius: 10px;');
            var link=document.createElement("a");
            link.setAttribute('href', 'photos'+images[i]);
            link.setAttribute('onClick','return viewer.show('+i+')');
            slidesDiv.appendChild(link);
            link.appendChild(img);
        }
    </script>
    <br/>
</p>

Answer 1

只是尝试查看Chrome / Firefox开发者控制台中的网络标签，我认为图片是同步加载的，它们可能太大，因此会慢慢加载。

Answer 2

Javascript执行或图像加载的速度是多少？ 65个图像可能非常密集，特别是如果它们是来自网络的大图像。检查您的Chrome工具可以提供对此的深入了解。您可以尝试加载相同的小图像65次以查看JS是否是罪魁祸首，但我的直觉反应是图像加载是瓶颈。在这种情况下，您可以尝试使用imagemagick或GD之类的服务器端压缩。通常，我会在上传时将图像调整为几种标准尺寸，但这可能并非总是可行。

Answer 3

尝试延迟加载。在这里查看jQuery插件：http://www.appelsiini.net/projects/lazyload

Answer 4

为了获得更好的响应速度，您可能需要尝试加载html并延迟加载幻灯片显示的图像。例如幻灯片的slide或change事件。

除非您推出自己的幻灯片模块，否则大多数幻灯片插件都内置了此功能。

有一个很棒的jquery插件可以使用lazyload图像

http://www.appelsiini.net/projects/lazyload

启动站点时，页面和图像加载速度非常慢

4 个答案: