Page and images load very slow when launching the site

Question

I have a small gallery site with 65 images. I created a simple html page with a slide show. The site loads pretty slow. also, the images load very slow when trying to access it. What do you recommend?

Here is how I load my images.

<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

Is the speed in the Javascript execution or in the image load? 65 images can be pretty intensive, especially if they are large images coming over the network. checking your Chrome tools can provide insight into this. You could try loading the same, small image 65 times to see if the JS is the culprit, but my gut reaction is that the image loading is the bottle neck. In that case, you could try some server-side compression using something like imagemagick or GD. Generally, I resize images into a few standard sizes on upload, but that may not always be possible.

Answer 3

Try lazyloading. Look here for a jQuery Plugin: http://www.appelsiini.net/projects/lazyload

Answer 4

For better responsiveness you may want to try to load the html and lazy load the images for the slideshow as they are needed. ie on the slideshow's slide or change event for example.

Unless you're rolling out your own slideshow module, most slideshow plugins have this feature built in.

There is a great jquery plugin to lazyload images available for you to use

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