jQuery 的延迟加载插件与 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",
});

我

只是想指出，当我垂直滚动页面以延迟加载我的所有图像时，我正在尝试使用 jQuery 的延迟加载插件。我正在使用新的 HTML5 pushState() 方法将 url 更改为当前显示在视口中的容器(保存图像(的特定名称。

无论如何，似乎jQuery的延迟加载插件与pushState()方法不兼容，因为现在该插件对我不起作用。它只是加载第一个图像，但随后停止执行其操作。

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

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

编辑：

这将是一个现实生活中的例子，尽管 jsBin 不支持 pushState 方法，因此该错误不会发生在页面本身上......

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

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

Answer 1

嗨，

马特，您的问题似乎是推送状态调用中的相对 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; 
}

第一个图像未加载的原因是它实际上并不存在。

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

编辑：有趣的是，在Firefox开发文档中说它可以是一个相对URL，但这似乎不起作用...奇怪。