0

I have a slideshow I've found online. It's quite a large slideshow and the images take a really long time to load and I've already reduced the file size. I was hoping someone could show me how I preload the images to hopefully make it load quickly.

I'm also having another problem when viewing on a mobile site, it seems to shrink the image. I need it to stay full size.

The code is below:

// Speed of the automatic slideshow
var slideshowSpeed = 4000;

// Variable to store the images we need to set as background
// which also includes some text and url's.
var photos = [ {
        "title" : "Stairs",
        "image" : "banner1.png",
        "url" : "http://www.sxc.hu/photo/1221065",
        "firstline" : "Going on",
        "secondline" : "vacation?"
    }, {
        "title" : "Office Appartments",
        "image" : "Karreman_Calendar1.jpg",
    "url" : "http://www.sxc.hu/photo/1221065",
        "firstline" : "Or still busy at",
        "secondline" : "work?"
    }, {
        "title" : "Mountainbiking",
        "image" : "Karreman_Calendar2.jpg",
        "url" : "http://www.sxc.hu/photo/1221065",
        "firstline" : "Get out and be",
        "secondline" : "active"
    }, {
        "title" : "Mountains Landscape",
        "image" : "Karreman_Calendar3.jpg",
        "url" : "http://www.sxc.hu/photo/1271915",
        "firstline" : "Take a fresh breath of",
        "secondline" : "nature"
    }, {
        "title" : "Italian pizza",
        "image" : "Karreman_Calendar4.jpg",
        "url" : "http://www.sxc.hu/photo/1042413",
        "firstline" : "Enjoy some delicious",
        "secondline" : "food"
    },

    {
        "title" : "Italian pizza",
        "image" : "Karreman_Calendar5.jpg",
        "url" : "http://www.sxc.hu/photo/1042413",
        "firstline" : "Enjoy some delicious",
        "secondline" : "food"
    },
    {
        "title" : "Italian pizza",
        "image" : "Karreman_Calendar6.jpg",
        "url" : "http://www.sxc.hu/photo/1042413",
        "firstline" : "Enjoy some delicious",
        "secondline" : "food"
    },

    {
        "title" : "Italian pizza",
        "image" : "Karreman_Calendar8.jpg",
        "url" : "http://www.sxc.hu/photo/1042413",
        "firstline" : "Enjoy some delicious",
        "secondline" : "food"
    },
        {
        "title" : "Italian pizza",
        "image" : "Karreman_Calendar9.jpg",
        "url" : "http://www.sxc.hu/photo/1042413",
        "firstline" : "Enjoy some delicious",
        "secondline" : "food"
    },

        {
        "title" : "Italian pizza",
        "image" : "Karreman_Calendar10.jpg",
        "url" : "http://www.sxc.hu/photo/1042413",
        "firstline" : "Enjoy some delicious",
        "secondline" : "food"
    },

        {
        "title" : "Italian pizza",
        "image" : "Karreman_Calendar11.jpg",
        "url" : "http://www.sxc.hu/photo/1042413",
        "firstline" : "Enjoy some delicious",
        "secondline" : "food"
    },

        {
        "title" : "Italian pizza",
        "image" : "Karreman_Calendar12.jpg",
        "url" : "http://www.sxc.hu/photo/1042413",
        "firstline" : "Enjoy some delicious",
        "secondline" : "food"
    },

        {
        "title" : "Italian pizza",
        "image" : "Karreman_Calendar13.jpg",
        "url" : "http://www.sxc.hu/photo/1042413",
        "firstline" : "Enjoy some delicious",
        "secondline" : "food"
    }


];



$(document).ready(function() {

    // Backwards navigation
    $("#back").click(function() {
        stopAnimation();
        navigate("back");
    });

    // Forward navigation
    $("#next").click(function() {
        stopAnimation();
        navigate("next");
    });

    var interval;
    $("#control").toggle(function(){
        stopAnimation();
    }, function() {
        // Change the background image to "pause"
        $(this).css({ "background-image" : "url(images/btn_pause.png)" });

        // Show the next image
        navigate("next");

        // Start playing the animation
        interval = setInterval(function() {
            navigate("next");
        }, slideshowSpeed);
    });


    var activeContainer = 1;    
    var currentImg = 0;
    var animating = false;
    var navigate = function(direction) {
        // Check if no animation is running. If it is, prevent the action
        if(animating) {
            return;
        }

        // Check which current image we need to show
        if(direction == "next") {
            currentImg++;
            if(currentImg == photos.length + 1) {
                currentImg = 1;
            }
        } else {
            currentImg--;
            if(currentImg == 0) {
                currentImg = photos.length;
            }
        }

        // Check which container we need to use
        var currentContainer = activeContainer;
        if(activeContainer == 1) {
            activeContainer = 2;
        } else {
            activeContainer = 1;
        }

        showImage(photos[currentImg - 1], currentContainer, activeContainer);

    };

    var currentZindex = -1;
    var showImage = function(photoObject, currentContainer, activeContainer) {
        animating = true;

        // Make sure the new container is always on the background
        currentZindex--;

        // Set the background image of the new active container
        $("#headerimg" + activeContainer).css({
            "background-image" : "url(/karreman/slideshow/" + photoObject.image + ")",
            "display" : "block",
            "z-index" : currentZindex
        });

        // Hide the header text
        $("#headertxt").css({"display" : "none"});

        // Set the new header text
        $("#firstline").html(photoObject.firstline);
        $("#secondline")
            .attr("href", photoObject.url)
            .html(photoObject.secondline);
        $("#pictureduri")
            .attr("href", photoObject.url)
            .html(photoObject.title);


        // Fade out the current container
        // and display the header text when animation is complete
        $("#headerimg" + currentContainer).fadeOut(function() {
            setTimeout(function() {
                $("#headertxt").css({"display" : "block"});
                animating = false;
            }, 500);
        });
    };

    var stopAnimation = function() {
        // Change the background image to "play"
        $("#control").css({ "background-image" : "url(images/btn_play.png)" });

        // Clear the interval
        clearInterval(interval);
    };

    // We should statically set the first image
    navigate("next");

    // Start playing the animation
    interval = setInterval(function() {
        navigate("next");
    }, slideshowSpeed);

Edited by kimmi_baby

3
Contributors
2
Replies
16
Views
3 Years
Discussion Span
Last Post by designershiv
0

I have a slideshow I've found online. It's quite a large slideshow and the images take a really long time to load and I've already reduced the file size. I was hoping someone could show me how I preload the images to hopefully make it load quickly.

@kimmi_baby

You can reduce the images size by doing that it will load quickly.

You can used photoshop to optimize images so it is light, then it will go smoothly.

I never seen or heard any jQuery/javascript code that scale an image to appear/load quickly.

It's usually animation feature like that code you provided above.

Edited by LastMitch

0

Hi kimmi_baby,

There is nothing to do with script, Image optimization should be done manually.

for Preloader just add the preloader image as background in gallery container div. this will helps

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.