如何动态prerender页面?

chaihongjun
  • 297

这几天在看预加载的东东,有dns-prefetch,preconnect,prefetch,prerender。目前对最后一个prerender有兴趣,可以预先加载整个页面(相当于后台隐藏预添加一个tab)。
设想是这么做,在一个页面中,当鼠标指向一个标签的时候,就在当前页面<head>添加预加载

<link rel="prerender" href="//www.example.com/example.html">

当鼠标离开的时候就把这个预加载标签删除了:

$(document).ready(function() {
    $("a[href!='']").each(function() {
        $(this).on('mouseenter', function(event) {
            var pre_url = $(this).attr("href");
            $("link").each(function() {
                if (!($(this)[href=pre_url])) {
                    $("head").append('<link rel="prerender" href="' + pre_url + '">');
                }
            });
        });
        $(this).on('mouseleave', function(event) {
            var pre_url = $(this).attr("href");
            $("link").each(function() {
                if (!($(this)[href=pre_url])) {
                    $("head").remove('<link rel="prerender" href="' + pre_url + '">');
                }
            });
        });
    });
});

发现预加载的偏多了,而且移出鼠标并不能删除那个预加载

回复
阅读 2.7k
1 个回答
✓ 已被采纳

你的if (!($(this)[href=pre_url])) {}这个我没看懂是什么意思,不是这样判断的
$('#a').remove();是直接删除id=a你的用法不对
$("a[href!='']").each(function() {})多余了$("a[href!='']").on('mouseenter')会给所有选择到的元素添加事件

$(document).ready(function() {
    $("a[href!='']").on('mouseenter', function(event) {
        var bool = false;
        var pre_url = $(this).attr("href");
        $("link").each(function() {
            if (($(this).attr("href")==pre_url)) {//判断是否已经存在存在则不添加
                bool = true
            }
        });
        if(!bool){
            $("head").append('<link rel="prerender" href="' + pre_url + '">');
        }
    });
    $("a[href!='']").on('mouseleave', function(event) {
        var pre_url = $(this).attr("href");//只要鼠标移出就删除 所有不用判断
        $('link[href="' + pre_url +'"]').remove();
    });
});
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
你知道吗?

宣传栏