Question

I have a code in my js file.

function makeScrollable(wrapper, scrollable){  
    ...
    // Hide images until they are not loaded
    scrollable.hide();

    var loading = $('<div class="loading">Loading...</div>').appendTo(wrapper);

    // Set function that will check if all images are loaded
    var interval = setInterval(function(){
        var images = scrollable.find('img');
        var completed = 0;

        if (completed == images.length) {
            clearInterval(interval);

            // Timeout added to fix problem with Chrome
            setTimeout(function(){
                loading.hide();
                ....
            }, 1000); //end of setTimeout(func, delay)

        } //end of if (completed == images.length)

    }, 100); //end of var interval = setInterval(fn, 100)

    ...
}

(function(){
    makeScrollable("div.sc_menu_wrapper", "div.sc_menu");
})(jQuery);

But my timeout function isn’t calling. I am still getting the loading Div. Function should be call after 1 sec, which hide the loading div and execute code after. But it isn’t happening. What i am doing wrong?
Thanks

Answer 1

Wrong position of code.

    var completed = 0;

    if (completed == images.length) {  // This will be true only when there are no images
        clearInterval(interval);


        setTimeout(function(){
            loading.hide();
            ....
        }, 1000); 

    } 

put it outside

var completed = 0;
var interval = setInterval(function(){
    var images = scrollable.find('img');


    if (completed == images.length) {
        clearInterval(interval);

        // Timeout added to fix problem with Chrome
        setTimeout(function(){
            loading.hide();
            ....
        }, 1000); //end of setTimeout(func, delay)

    } //end of if (completed == images.length)

}, 100); //end of var interval = setInterval(fn, 100)

And hope you are incrementing completed somewhere in the code