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",
});

我只想指出，当我在页面中垂直滚动到懒惰加载所有图像时，我正在尝试使用Lazy Load Plugin for jQuery。我正在使用新的HTML5 pushState()方法将网址更改为当前在视口中显示的容器的特定名称（保存图像）。

无论如何，似乎jQuery的Lazy Load Plugin与pushState()方法不兼容，因为现在这个插件对我不起作用。它只是加载第一张图片，然后停止做它的事情。

一旦删除行window.history.pushState(hash, hash, url);，插件就可以正常工作。没有错误被抛出，因此调试它并找到解决方案真的很难。

有什么想法吗？我能在这做什么？

编辑：

这里有一个真实的例子，虽然jsBin不支持pushState方法，所以bug本身不会出现在页面本身......

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

这是真实的示例文件，因此可以测试错误... http://cl.ly/1b2K2W050V0k0d2V0z0e 只需取消注释我上面提到的那条线，看它是否正常工作！

Answer 1

您好Matt您的问题似乎是pushstate调用中的相对url。这是我改变了：

我在js文档的开头添加了一个变量来捕获初始浏览器位置：

var initialHref = location.href;

然后我对pushstate调用中的“ url ”var进行了相关更改：

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; 
}

第一张图片未加载的原因是doesn't actually exist。

现在似乎在Firefox等中正常工作。在这里为您提供实时版本：http://vdotgood.com/stack/test.html

编辑：在Firefox dev docs中足够有趣的是它可以是相对网址，但似乎不起作用......奇怪。

jQuery的Lazy Load Plugin与HTML pushState（）不兼容？

1 个答案: