Page loader for certain elements of the body

Question

I have added to my website this loader

$(window).load(function () {
        $("#page-preloader").fadeOut(300);
});

which as you can see it fades out after everything of the page is loaded.

I would like to have a loader which fades out right after a class is loaded (i.e. class="myclass")) and not wait for everything to get loaded.

Thank you in advance.

for example
hi i am some content
. when this div is loaded the loader should fade out. — Give IT, Jul 13 '15 at 16:54

score 0 · Answer 1 · answered Jul 13 '15 at 16:50

0

Try:

$('.myclass').load(function () {
        $("#page-preloader").fadeOut(300);
});

Same format as before, just different selector.

answered Jul 13 '15 at 16:50

JBux

score 0 · Answer 2 · answered Jul 13 '15 at 17:00

0

Try using document ready instead of load to see if the effect is what you need

$(function() {
    $("#page-preloader").fadeOut(300);
});

load() will wait for elements that have url, href and alike attributes.

answered Jul 13 '15 at 17:00

jperelli

score 0 · Accepted Answer · answered Jul 13 '15 at 17:15

0

var load_cs = $('.myclass');

if (load_cs.length) {
    $("#page-preloader").delay(3000).fadeOut(300);
}

I did this.. and it is pretty much working as i want. Thanks for the help guys. If anyone has any other advice I will be happy to hear it.

answered Jul 13 '15 at 17:15

Give IT

3 Answers3