Geek asks and answers

Preloading images after page loading using javascript and for loops

I am currently working on creating a photo gallery of a web page. I have a ton of images that I would like to preload using Javascript after the page loads. Instead of having a really very long list of HTML links in my array, can loops be used for? See my code below. Any helpful info on what I'm doing wrong with loops would be greatly appreciated! Thank!

<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>

In the part that I came across, there are loops forin the section preload(). The section preload()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"
)
+3
source share
2 answers

. , push:

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');

apply, :

preload.apply(null, urls);

, preloader :

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);
}
+2

, , . , .

, , , , , . :

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);
    }
}

, URL- , JavaScript .

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

3 , src .

, IE . , JavaScript, jQuery, , , -. , , , , , - , , , , .

0

More articles:


All Articles