今天打开博客一看, wtf
发现有些地方的图片就能正常加载, 抓包看看,,,
- 不能加载的图片
- 能加载的图片
偶, 这不是那啥防盗链嘛...
- 我再打开控制台看看...
- 偶, 你美, 这是什么...
什么乱七八糟的, 于是掏出 jQuery,还在学 js 基础, jQuery 不熟... 写了如下代码加入页面:
方法一:
$(document).ready(function () {
$("#pjax img").attr("referrerpolicy","origin");
$('#pjax').on('DOMNodeInserted', function(){
$("#pjax img").attr("referrerpolicy","origin");
});
}
于是就正常了:
想了想, 这种方法好像性能好像有点低, 而且有的浏览器不兼容, 于是换了种思路...
方法二
直接用 js, 在 script 中加入:
document.getElementById('pjax').addEventListener('error', throttle(referrerPolicy), true);
/*修改请求图片的属性*/
function referrerPolicy() {
var imgs = this.getElementsByTagName('img');
for (var i = 0; i < imgs.length; i++) {
imgs[i].setAttribute("referrerpolicy", "origin");
}
}
/*稀释时间段内调用方法次数*/
function throttle(fn) {
let canRun = true;
return function () {
if (!canRun) return;
canRun = false;
setTimeout(() => {
fn.apply(this, arguments);
canRun = true;
}, 500);
};
}
哈哈这样好像也可以(不过检查元素发现属性并没有改变, 但是图片能加载, 唉??woc)...
方法三:
最简单的方法, 釜底抽薪改 ftl 模板, cxk 你美的, 哈哈感觉自己像个 zz...
改成 referrerpolicy="origin"
此时基本上图片能正常加载, 但是还有 bug, 就是翻页的时候第二页图片不能正常显示, 还需要改页脚的翻页按钮(猜测是有一个默认设置的原因):
也是在 article-list.ftl 里面, 加上 referrer="origin"
:
基本就完成了, 折腾一时爽, 一直掉头发一直爽
改模板好像需要改好几处...用 idea 的全局搜索(ctrl+shift+r)改效果比较好...
欢迎来到这里!
我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。
注册 关于