Lazy Load Plugin for jQuery not compatible with HTML pushState()?

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!

No way! If I download the files and launch the index.html in any browser the images are not loaded. It says "No Image Available" on the placeholder image! As soon as you comment out the line window.history.pushState(hash, hash, url); in the JS file the images are loaded without a problem. Please test it again! — matt
– matt, Commented Jan 27, 2012 at 7:44
Test it in Chrome or Firefox! As said, right now none of the images are loaded while scrolling. When I comment out pushState() it works just fine! No one else seeing that problem? It seems to work partially in Safari where only the first image is not getting lazy-loaded! — matt
– matt, Commented Jan 27, 2012 at 7:59

Steve O · Accepted Answer · 2012-01-27 12:35:54Z

3

+300

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.

edited Jan 27, 2012 at 12:35

answered Jan 27, 2012 at 12:00

Steve O

5,8542 gold badges27 silver badges27 bronze badges

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

1 Comment

matt Over a year ago

Well, first of all thank you for your answer. However I don't get what the url inside the pushstate() Method has to do with the lazyload plugin and the fact that images are getting loaded or not! But you made me aware of the problem and after two days of testing and trying and wasting time I finally found the solution on my real project. The problem is not the relative URL in the pushstate as you wrote but the relative url of my images! So on my real site the img src is "img/whatever/photo.jpg". If I change that to "domain.com/img/whatever/photo.jpg" everything works fine!

Collectives™ on Stack Overflow

Lazy Load Plugin for jQuery not compatible with HTML pushState()?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related