如何动态prerender页面?

发布于 2022-09-06 05:35:10 字数 1087 浏览 15 评论 0

这几天在看预加载的东东，有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 + '">');
                }
            });
        });
    });
});

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

与酒说心事 2022-09-13 05:35:10

你的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();
    });
});

回复收藏 0

~没有更多了~