Javascript 以Instantclick样式执行PJAX调用（仅在链接悬停时加载所需内容）

PJAX的工作非常简单，只加载请求页面所需的内容，而不是再次加载所有公共模式并将接收到的内容放置在布局中，就像带有angular JS的单页应用程序一样，具有所有back buttona和history功能

Instantclick（Instantclick.io）是另一个有趣的方法，它请求悬停在链接上的页面，将内容加载到缓存中，并在用户释放click时替换内容，但这会加载整个页面

我想要的是Instantclick只拉取所需的内容，比如PJAX，在链接悬停时触发PJAX请求（有或没有Instantclick的支持）-从继续链接到单击到单击释放都会有延迟，此时PJAX可以完成任务并立即将内容提升100%

有办法吗

---

谢谢

假设您的锚定标记有一个名为“data pjax”的属性，并且容器div名为“content”，那么应该可以：

        if ($.support.pjax) {
            $('a[data-pjax]').on('mouseover', function(event) {
                var container = $('#content');
                $.pjax.click(event, {container: container});
            });
        }

---

好的，我分析了jquery.pjax.js和Instantclick这两个库，它们的耦合程度非常高，因此尝试将它们集成起来

因此，一个困难的解决方案是将一个库的功能集成到另一个库中，但不幸的是，我没有足够的知识来实现这一点

我能提出的是一个基于先前解决方案的黑客攻击

其主要思想是在鼠标上方触发click事件，但容器是

display:none

。 然后单击将内容从

#隐藏容器

移动到

#容器

html代码将是：

<div id="container"></div>
<div style="display:none" id="hidden-conainer"></div>

从我的观点来看，由于以下原因，现在的解决方案显然是不完整的：

• Instantclick即使使用触摸屏也能处理移动设备，此解决方案没有
• 如果你有很多链接关闭，用户只是“玩他们”没有点击顶部的js是保持清洁，需要良好的内容，但在酒吧你会看到地址不断变化

即使是这些问题，如果你想达到快速的感觉，解决方案也可能“足够好”。事实上，如果用户直接进入链接并点击UX，那就太棒了

---

除此之外，最好为鼠标盖创建一个缓存，这样即使用户试图强调界面，也不会一直进行相同的调用。

我修改了几天前为样式指南编写的代码，将其添加到pjax导航中。我喜欢你请求的想法，这不是一个坏主意，但是需要一些选项，比如，不缓存页面上的每个链接，检测外部页面等等，但是可以随意使用它。 还有一些控制台调试，有点原始，使用jQuery

var SPAajaxloading=函数（）{
var$links=$（“#导航a”）；
var historyCache={}；
var getCache=函数（url）{
返回historyCache[url]；
};
var setCache=函数（url、内容）{
historyCache[url]=内容；
};
var setContent=函数（内容、URL）{
$（'#content'）.html（content）；
pushState（null，null，URL）；
};
var getFragmentContent=函数（responsecontent）{
var$fakediv=$（''）；
$fakediv.html（responsecontent）；
返回$fakediv.find（'#content'）.html（）；
};
var getPageContent=函数（URL、缓存）{
返回$.ajax({
url:url
}).promise（）.done（函数（响应）{
var\u content=getFragmentContent（响应）；
！缓存和设置内容（\u内容，URL）；
setCache（URL，_内容）；
});
};
var linkbinding=函数（e）{
e、 预防默认值（）；
var_URL=this.href；
var cachedContent=getCache（_URL）；
//todo使用popstate重构此
如果（e.type==='click'&&cachedContent）{
console.info（“通过缓存插入的内容”）；
setContent（cachedContent，_URL）；
}
否则{
//如果mouseenter和cache在这里，则不执行任何操作
if（e.type==='mouseenter'&&cachedContent）{
info（'无事可做，缓存已完成'）；
}
否则{
console.info（'puting content in cache？'，e.type='mouseenter'）；
getPageContent（_URL，e.type==='mouseenter'）
}
}
};
$links.on（'mouseenter click'，linkbinding）；
setCache（location.href，$（'#content'）.html（））；
$（窗口）.on（'popstate'，函数（）{
var_URL=location.href；
var content=getCache（_URL）；
如果（内容）{
setContent（content，_URL）；
}
否则{
getPageContent（_URL）
}
});
};

我刚刚在Gistub上发布了它，如果你想改进它，或者为什么不在PJAX加载上启动另一个github项目，告诉我，我愿意在这方面做得更进一步！

---

好的，上面的一个在鼠标悬停时触发ajax请求，而不是单击它在鼠标悬停时触发并完成操作。我实际期望的是悬停时触发，但只有在单击后才显示内容。完全正确。悬停获取并在单击后显示内容-类似于instantclick。如何做到这一点？您找到解决方案了吗？您是否尝试过在hover上对指定URL进行ajax调用，以将回调（success）方法中的页面片段作为methods变量接收，然后将该变量保存到objects变量（例如Fragments.pageOne）最后通过将片段替换为objects变量来执行replace on onclick事件？这是您想要的方法吗？@Karem您是否尝试过至少一种实现？

$(document).ready(function(){
    if ($.support.pjax) {
        $('a').on('mouseover', function(event) {
            // clean idden-conainer 
            $('#hidden-conainer').empty();

            var container = $('#hidden-conainer');
            $.pjax.click(event, {container: container});
        }).on('click', function(event) {
            event.preventDefault();
            $('#container').html($('#hidden-conainer').html());
        });
    }
});

var SPAajaxloading = function () {

    var $links = $('#nav a');
    var historyCache = {};


    var getCache = function (url) {
        return historyCache[url];
    };
    var setCache = function (url, content) {
        historyCache[url] = content;
    };
    var setContent = function (content, URL) {
        $('#content').html(content);
        history.pushState(null, null, URL);
    };

    var getFragmentContent = function (responsecontent) {
        var $fakediv = $('<div>');
        $fakediv.html(responsecontent);
        return $fakediv.find('#content').html();
    };

    var getPageContent = function (URL, caching) {
        return $.ajax({
            url: URL
        }).promise().done(function (response) {
            var _content = getFragmentContent(response);
            !caching && setContent(_content, URL);
            setCache(URL, _content);
        });
    };


    var linkbinding = function (e) {
        e.preventDefault();
        var _URL = this.href;

        var cachedContent = getCache(_URL);
        //todo refactor this with popstate
        if (e.type === 'click' && cachedContent) {
            console.info('content inserted via cache');
            setContent(cachedContent, _URL);
        }
        else {

            // if mouseenter and cache is here, do nothing
            if (e.type === 'mouseenter' && cachedContent) {
                console.info('nothing to do, caching already done');
            }
            else {
                console.info('putting content in cache?', e.type === 'mouseenter');
                getPageContent(_URL, e.type === 'mouseenter')
            }
        }
    };

    $links.on('mouseenter click', linkbinding);

    setCache(location.href, $('#content').html());

    $(window).on('popstate', function () {
        var _URL = location.href;
        var content = getCache(_URL);
        if (content) {
            setContent(content, _URL);
        }
        else {
            getPageContent(_URL)
        }
    });

};