CODEWITHSUNDEEP
javascriptimageloopsfor-looppreload
kaffolder
kaffolder

Reputation: 401

Preload images after page load with javascript & for loops

I am currently working on creating a webpage photo gallery. I have a ton of images I would like to preload with Javascript after page load. Rather than having a really, really long list of HTML links in my array, is it possible to utilize for loops? Please see my below code. Any helpful insights on what I'm doing wrong with the for loops would be very much appreciated! Thank you!!

<script type="text/javascript">
    function preloader() {
        var images = new Array()
        function preload() {
            for (i = 0; i < preload.arguments.length; i++) {
                images[i] = new Image()
                images[i].src = preload.arguments[i]
            }
        }
        preload(
            var i=1;
            "http://example.com/images/gallery/elephants-" + for (i=1;i<=5;i++) {document.write(i);} + ".jpg",
            "http://example.com/images/gallery/penguins-" + for (i=1;i<=2;i++) {document.write(i);} + ".png"
        )
    }

    function addLoadEvent(func) {
        var oldonload = window.onload;
        if (typeof window.onload != 'function') {
            window.onload = func;
        } else {
            window.onload = function() {
                if (oldonload) {
                    oldonload();
                }
                func();
            }
        }
    }
    addLoadEvent(preloader);
</script>

The part I'm having a problem with is the for loops in the preload() section. The preload() section should output/do this:

preload(
    "http://example.com/images/gallery/elephants-1.jpg",
    "http://example.com/images/gallery/elephants-2.jpg",
    "http://example.com/images/gallery/elephants-3.jpg",
    "http://example.com/images/gallery/elephants-4.jpg",
    "http://example.com/images/gallery/elephants-5.jpg",
    "http://example.com/images/gallery/penguins-1.png",
    "http://example.com/images/gallery/penguins-2.png"
)

Upvotes: 3

Views: 3193

Answers (2)

Paul
Paul

Reputation: 141827

You can't concatenate a string and a loop together. You'll have to build an array of strings using a loop and the push method:

var i, urls = [];
for(i = 1; i <= 5; i++)
    urls.push('http://example.com/images/gallery/elephants-' + i + '.jpg');
for(i = 1; i <= 2; i++)
    urls.push('http://example.com/images/gallery/penguins-' + i + '.jpg');

Then use apply to call the preload function and pass in that array as the arguments:

preload.apply(null, urls);

So your whole preloader function becomes:

function preloader() {
    var images = new Array()
    function preload() {
        for (i = 0; i < preload.arguments.length; i++) {
            images[i] = new Image()
            images[i].src = preload.arguments[i]
        }
    }

    var i, urls = [];
    for(i = 1; i <= 5; i++)
        urls.push('http://example.com/images/gallery/elephants-' + i + '.jpg');
    for(i = 1; i <= 2; i++)
        urls.push('http://example.com/images/gallery/penguins-' + i + '.jpg');

    preload.apply(null, urls);
}

Upvotes: 3

jamesmortensen
jamesmortensen

Reputation: 34038

You've defined a preload function that takes zero arguments, yet you are trying to pass in multiple arguments into the preload function. Additionally, you're using semicolons to separate the parameters instead of the required commas.

To accomplish this, I would suggest modifying your preload function to take a single array object that you can then iterate through, regardless of how many parameters are passed into the function. Below is a sample function definition:

function preload(arr) {
    for(var i = 0; i < arr.length; i++) {
        var img = document.createElement("img");
        img.setAttribute("style","display:none");
        img.setAttribute("src",arr[i]);
        document.body.appendChild(img);
    }
}

To use the function, you would pass in an array of URLs into the preload function using JavaScript object notation to represent the array. 

preload( 
    [ 
        "/images/first.png",
        "/images/second.png",
        "/images/third.png"
    ]
);

This array contains 3 strings, and each of the 3 strings will be passed into the src attribute of a separate, hidden image tag.

My only disclaimer with my specific example is that certain versions of IE may or may not cache hidden images. Whenever you work with raw JavaScript, as opposed to a library like jQuery, you'll need to thoroughly test in every browser to make sure that the solution is cross-compatible. Perhaps you can simply modify your function to accept the correct parameters and then use your existing techniques to preload the images, assuming yours is a tried and tested solution that you know works in all browsers you plan to support.

Upvotes: 0

Related Questions