Geek asks and answers

Using jQuery to sequentially load and extrude elements

I am working on some code that will load a bunch of (20+) large images (~ 500 KB each) sequentially. After loading each image, it disappears. I used this script from this discussion as a starting point.

My images load the way I want, but I need to do a couple of other things without breaking this sequential download. I need to load markup containing an iframe between the third and fourth images, and I need to load the link after the images. Here is an example of the markup output I need:

<div id="container">
  <img src="img-1.jpg" />
  <img src="img-2.jpg" />
  <img src="img-3.jpg" />
  <div><iframe></iframe></div>
  <img src="img-4.jpg" />
  <img src="img-5.jpg" />
  <img src="img-6.jpg" />
  <img src="img-7.jpg" />
  <img src="img-8.jpg" />
  <img src="img-9.jpg" />
  <a href="/link/">Link text</a>
</div>

, , iframe , , , . javascript:

var no = 22,
main = [],
i;

for (i = 1; i <= no; i++) {
    main[i] = "path/to/image/folder/img-" + i + ".jpg";
}

function loadImages(arr,loc) {
if (arr.length === 0) {
    return;
}

function imageLoaded(img) {
$(img).hide().appendTo(loc).fadeIn(800);
}

function loadImage() {
    var url = arr.shift(),
    img = new Image(),
    timer;

    img.src = url;

    if (img.complete || img.readyState === 4) {
        imageLoaded(img);
        if (arr.length !== 0) {
            loadImage();
        }
    }
    else {
        timer = setTimeout(function() {
            if (arr.length !== 0) {
                loadImage();
            }
            $(img).unbind("error load onreadystate");
        }, 10000);
        $(img).bind("error load onreadystatechange", function(e) {
            clearTimeout(timer);
            if (e.type !== "error") {
                imageLoaded(img);
            }
            if (arr.length !== 0) {
                loadImage();
            }
        });
    }
}
    loadImage();
}

loadImages(main,"#container");

"no" ( ), loadImages , , . , , , javascript. !

+5
3

loadImage, :

loadImage(){
//stuff 
if($('#container img').length == 4){
    insertIframeMarkup(); 
}

//other stuff

}
0

,

, , , .

var imgArr = ['http://healthystartups.com/storage/600px-MA_Route_1.png?__SQUARESPACE_CACHEVERSION=1319542839834', 'http://upload.wikimedia.org/wikipedia/commons/thumb/5/54/MA_Route_2.svg/600px-MA_Route_2.svg.png', 'http://foo.com/foo_873.jpg', 'http://3.bp.blogspot.com/-Q_owQUxNjdQ/Te3ALCmT3oI/AAAAAAAAAnk/wv9r0b0MT-g/s1600/600px-MA_Route_3.svg_.jpg', 'http://honestreviewscorner.com/wp-content/uploads/2012/10/the-number-4-in-a-circle.jpg1.png', 'http://www.thefrugalette.com/wp-content/uploads/2011/09/number-5.png'];

var count = 0;

function LoadImages(images) {
    img = images[count];
    img = new Image();
    img.src = images[count];

    //Between 3 and 4
    if(count == 4)
    {
        $('<iframe src="http://www.w3schools.com"></iframe>').appendTo('body');
    }


    if (img.complete || img.readyState === 4) {
        $(img).hide().appendTo('body').fadeIn(function () {
            count++;
            if (count < images.length) LoadImages(images);
            else $('body').append('<div>last line</div>')
        })

    } else {
        count++;
        LoadImages(images)
    }

}
LoadImages(imgArr);
0

. :

var imgArr = ['http://healthystartups.com/storage/600px-MA_Route_1.png?__SQUARESPACE_CACHEVERSION=1319542839834', 
    'http://upload.wikimedia.org/wikipedia/commons/thumb/5/54/MA_Route_2.svg/600px-MA_Route_2.svg.png',
    'http://1.bp.blogspot.com/-jiW5NeKtZBY/T-nyLRuSSZI/AAAAAAAACaA/Ro8wjmk32ow/s1600/red-number-8.jpg',
    'http://3.bp.blogspot.com/-Q_owQUxNjdQ/Te3ALCmT3oI/AAAAAAAAAnk/wv9r0b0MT-g/s1600/600px-MA_Route_3.svg_.jpg',
    'http://us.123rf.com/400wm/400/400/zoomzoom/zoomzoom1102/zoomzoom110200070/8913747-4--created-by-light-colorful-digits-over-black-background.jpg',
    'https://twimg0-a.akamaihd.net/profile_images/1633986906/6digits-fist-Logo.png'],
    images=[imgArr.length],
    otherUrls = {}, urlTypes = {
        IFRAME: 0,
        LINK: 1
    };

//INITIALIZE OTHER URLS WITH URL AND INDEX AT WHICH IT WOULD BE LOADED
    function createInfo(url, type, text) {
        var o = {};
        o.URL = url;
        o.Type = type;
        o.Text = text;
        return o;
    }
otherUrls[2] = createInfo("http://http://en.wikipedia.org/wiki/Punjabi_language", urlTypes.IFRAME);
otherUrls[4] = createInfo("http://http://en.wikipedia.org/wiki/Numerical_digit", urlTypes.LINK, "click here [wikipedia]");

function loadImages(arr,loc,other){
    var l=arr.length,i=0, url, idx, o;
    while(arr.length){
        url=arr.shift(),
        idx=(l-arr.length)-1,
        o=other[idx];

        makeImage(url,idx,loc,o);
    }
}

function makeImage(url, idx, loc, other){
    var image=new Image();
    image.src = url;
    images[idx]=image;
    image.onload=function(){
            imageLoaded(idx, loc, other);
        };
    image.onerror=function(){
            var ix=idx,ot=other,lc=loc;
            imageError(ix, lc, ot);
        };
}

function imageLoaded(i,l,o){
    var img=$(images[i]);
    img.hide().css({'display':'block','height':'25px','width':'25px'}).appendTo(l).fadeIn();
    loadOtherObjects(o,img);
}

function imageError(i,l,o){
    // handle 404 using setTimeout set at 10 seconds, adjust as needed
    timer = setTimeout(function () {$(images[i]).unbind("error load onreadystate");}, 10000);
    $(images[i]).bind("error load onreadystatechange", function (e) {
        if (e.type !== "error") {
            imageLoaded(i,l,o);
        }
    });
}

function loadOtherObjects(o,img){
    if (o) {
        console.log(o);
        console.log(o.Type==urlTypes.LINK);
        if (o.Type == urlTypes.IFRAME) {
            var d = $("<div/>").css({'height':'250px','width':'250px'}), f = $("<iframe/>").attr("src", o.URL);
            f.appendTo(d);
            d.insertAfter(img);
        } else if(o.Type == urlTypes.LINK) {
            var lnk = $("<a/>").attr("href", o.URL).text(o.Text);
            lnk.insertAfter(img);
        }
    }
}

$(function(){
    loadImages(imgArr, "#container", otherUrls);
});

NOTE. . Pay attention to this answer to another question related to loading images using code, since not all browsers fire an event loadedif the images are in the cache.

0
source

More articles:


All Articles