I'm trying to implement the Lazy Load plugin into my jQueryMobile site to help speed up loadtimes on pages that contain a ton of images.
If I bypass JQM's ajax page-loading by going directly to the URL like this: http://hello.com/about
, the lazy loading works great. However, if I click-through to the About page from another page, which utilizes JQM's ajax page-loading, Lazy Load doesn't load.
The About page has an id of about
=> <div data-role="page" data-theme="a" id="about">
I've tried a number of variations of binding to the pageinit
function with no success. My latest attempt is:
$('#about').live('pageinit', function() {
$(window).load(function() {
$("img.lazy").lazyload();
});
});
Any guidance on this would be awesome. Thanks guys.
The window.load
function will fire only once, and you are binding to it after it fires when pages are pulled into the DOM via AJAX. The solution to your issue is pretty easy, run the code when the specific page initializes:
$(document).delegate('#about', 'pageinit', function() {
//notice I start the selection with the current page,
//this way you only run the code on images on this pseudo-page
$(this).find("img.lazy").lazyload();
});
This should work just fine since pageinit
won't fire until after document.ready
fires.
Also notice I used .delegate()
instead of .live()
since .live()
has been depreciated and could be removed from future releases.
$(SELECTION).live(EVENT, EVENT-HANDLER);
is the same as:
$(document).delegate(SELECTION, EVENT, EVENT-HANDLER);
And for the bonus round, as of jQuery 1.7, both of the above functions actually map to .on()
and you can use .on()
in a delegated manor like so:
$(document).on(EVENT, SELECTION, EVENT-HANDLER);
Documentation:
.live()
: http://api.jquery.com/live
.delegate()
: http://api.jquery.com/delegate
.on()
: http://api.jquery.com/on
The reason your code worked on the first page-view was because the window.load
event was firing after you bound to it in the pageinit
event handler, but on subsequent AJAX loads you are binding to the window.load
event even though it won't fire anymore.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With