.load jquery function not working when using specific div

Question

This line does not work

$('#bookcontainer').load( startSlide );

while this line does

$(window).load( startSlide );

#bookcontainer is a div containing four images.

Here's my whole code:

// JavaScript Document
$('#bookcontainer').load( startSlide );

var slide;

$('#slider').hover( 
function() {
        $('.arrow').show();
}, 
function() {
        $('.arrow').hide();
});

function startSlide() {
    $('.book').show();
    slide = setInterval(slideR, 5000);   
}


function slideR() {
    $('.book').first().css('left', '960px').appendTo('#bookcontainer').animate(
    {
        "left": "-=960px"
    }, {
        duration: 1000,
        easing: 'easeOutCubic'
    });

}


function slideL() {
    $('.book').last().animate(
    { "left":"+=960px" }, {
        duration: 1000,
        easing: 'easeOutCubic',
        complete: function() {
        $(this).prependTo('#bookcontainer').css('left', '0px');   
        }
    });

}


function right() {
    clearInterval(slide);
    slideR();
    startSlide();
};


function left() {
    clearInterval(slide);
    slideL();
    startSlide();
};

Andrew Whitaker · Accepted Answer · 2011-03-10 00:07:47Z

6

The load event can only be handled on elements that are associated with a url. From the documentation:

The load event is sent to an element when it and all sub-elements have been completely loaded. This event can be sent to any element associated with a URL: images, scripts, frames, iframes, and the window object.

If you're waiting on all of your images to load, you could apply the event handler to those images individually.

Also: $(window).load(...) will not be fired until all elements on the page are fully loaded (including graphics), so it's not necessary to bind the event to a div to make sure child elements have loaded.

If you're making an AJAX request and attempting to detect when content has been loaded into that div, you should make startSlide the success callback to your AJAX request.

edited Mar 10, 2011 at 0:07

answered Mar 9, 2011 at 23:58

Andrew Whitaker

126k32 gold badges296 silver badges308 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

jhodara Over a year ago

how do I call a function once a div containing images (hence all the images) is loaded?

Andrew Whitaker Over a year ago

@user643440: If you use $(window).load(...), all images inside that div (and all other divs) will have loaded.

jhodara Over a year ago

I gave the last image in the div an ID and called $('#lastbook').load(startSlide); Start slide will not go until all the images are loaded, pretty sure.

jhodara Over a year ago

cannot use $(window).load(...) because a different script is using it

Andrew Whitaker Over a year ago

@user643440: You can bind multiple event handlers to $(window).load(...) and it won't cause issues.

José Carlos · Accepted Answer · 2011-03-09 23:56:34Z

0

You should use $('#bookcontainer').load('url', startSlide ); have a look at http://api.jquery.com/load/

answered Mar 9, 2011 at 23:56

José Carlos

1,01516 silver badges29 bronze badges

Comments

Patrick Fisher · Accepted Answer · 2011-03-09 23:55:59Z

-1

The div element does not trigger a load event.

answered Mar 9, 2011 at 23:55

Patrick Fisher

8,0725 gold badges38 silver badges28 bronze badges

2 Comments

jatanp Over a year ago

load is not an event but jQuery's shorthand method to load contents through Ajax call

Andrew Whitaker Over a year ago

@jatanp: Not true: load is an event and its only triggered on certain elements, see my answer for more information.

Collectives™ on Stack Overflow

.load jquery function not working when using specific div

3 Answers 3

5 Comments

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related