javascript - 启动网站时页面和图像加载速度非常慢

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 开发者控制台中的网络选项卡，我认为图像是同步加载的，并且它们可能太大，因此加载速度很慢。