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

Page and images load very slow when launching the site

本文关键字：加载 图像 速度 非常 网站 启动      更新时间：2023-09-26

我有一个有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>

只需尝试在Chrome/Firefox开发人员控制台中查看网络选项卡，我认为图像是同步加载的，并且它们可能太大，因此加载缓慢。

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

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

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

有一个很棒的jquery插件可以延迟加载图像供您使用

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

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

相关文章：