Question

$(window).scroll(function() {

    hash = $('.layer:in-viewport').attr('id');

    if ( currentHash != hash ) { // fires it only one time when in-viewport

         if ( history && history.pushState ) { // if method is available
              window.history.pushState(hash, hash, url);
         }
    }

    currentHash = hash; 

});

$(".layer img").lazyload({
    effect: "fadeIn",
});

I just wanted to point out that I’m trying to use the Lazy Load Plugin for jQuery when scrolling vertically through my page to lazy load all my images. I’m using the new HTML5 pushState() Method to change the url to the specific name of the container (holding the images) currently shown in the viewport.

Anyway, seems like the Lazy Load Plugin for jQuery is not compatible with the pushState() Method because right now the plugin does not work for me. It just loads the first image but then stops doing its thing.

As soon as I remove the line window.history.pushState(hash, hash, url); the plugin works fine. No errors are thrown so it’s really tough debugging this and finding a solution for it.

Any ideas on that? What could I do here?

edit:

Here would be a real life example, although jsBin is not supporting the pushState Method so the bug doesn’t occur on the page itself …

http://jsbin.com/obaged/3/edit

And here are real example files so the bug can be tested … http://cl.ly/1b2K2W050V0k0d2V0z0e
Just uncomment the line I’ve mentioned above to see it working and not working!

Answer 1

Hi Matt your problem seems to be the relative url in the pushstate call. Here’s what I changed:

I added a variable to the beginning of the js document to capture the initial browser location:

var initialHref = location.href;

Then I made a relevant change to the “url” var in the pushstate call:

if ( currentHash != hash ) {

    // ADDED: BUILD THE FULL URL AND APPEND HASH
    if(location.href == initialHref){
        url = location.href + sl + hash;
    }else{
        url = location.href.substr(0, location. href.lastIndexOf("/")) + sl + hash;
    }


    // If history API is available
    if ( history && history.pushState ) {

        if ( !historyBack ) {
            //console.log(url);
            window.history.pushState(hash, hash, url);
        }

    // Fallback to top.location.hash
    } else {

        $(window).off('hashchange', goToHash);

        top.location.hash = url;

        setTimeout( function() {
            $(window).on('hashchange', goToHash);
            }, 0);
    }

    currentHash = hash; 
}

The reason the first image isn’t loading in is it doesn’t actually exist.

Seems to work fine now in Firefox etc. Live version here for you: http://vdotgood.com/stack/test.html

EDIT: Funnily enough in the Firefox dev docs is says it can be a relative URL but that doesn’t seem to work…odd.