自动更新代码(推荐使用):
导入网页插件:图片点击加载(自动更新)(当前用户:13,总安装次数:23)<script src="https://hu60.cn/q.php/api.webplug-file.1_public_img_click_load.js"></script>
如果你有多个插件,请将图片点击加载插件移到插件列表的开头,以达到更好的流量节省效果。
如果图片点击加载插件位于其他插件之后,可能会导致部分图片在插件生效前就加载完成,节省流量的目的就不能完全实现。
完整代码仅供参考,不能直接执行
(() => {
function getSizeFromUrl(url) {
url = hu60_decode_url64(url);
var parts = url.match(/\/file\/(?:hash\/[^\/]+\/[a-f0-9]{32}|uuid\/[^\/]+\/[a-f0-9-]{36})(\d+)\b/);
return parts ? parseInt(parts[1]) : 0;
}
function getImgSize(img) {
if (img.alt) {
var parts = img.alt.match(/([0-9]+(:?\.[0-9]+)?\s*(?:[KMGT]B|bytes))/);
if (parts) return parts[1];
}
var size = getSizeFromUrl(img.src);
return size > 0 ? humanize.filesize(size) : '';
}
document.querySelectorAll('.userimg').forEach(x => {
// 暂时抑制外层链接
if (x.parentNode.href) {
x.parentNode._href = x.parentNode.href;
x.parentNode.href = `javascript:void(0);`;
}
// 保存原始URL
x._url = x.src;
// 图片替换为文字SVG
var outLink = x.parentNode.href ? `<text x="15" y="125" fill="red">再次点击打开链接</text>` : '';
var alt = x.alt ? escapeHtml(x.alt) : '';
var size = getSizeFromUrl(x.src);
size = getImgSize(x);
x.src = `data:image/svg+xml;utf8,
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<text x="15" y="35" fill="red">${alt}</text>
<text x="15" y="65" fill="red">${size}</text>
<text x="15" y="95" fill="red">点击加载图片</text>
${outLink}
</svg>`;
});
})();
$(document).ready(() => {
// 加这个延时,就可以保证晚于任何其他插件执行,以解决和viewer.js的冲突
setTimeout(() => {
document.querySelectorAll('.userimg').forEach(x => {
// 替换掉虎绿林的点击查看大图事件
x._onclick = x.onclick;
x.onclick = function () {
this.src = this._url;
// 再次点击就触发虎绿林的点击查看大图事件
x.onclick = x._onclick;
// 恢复被抑制的图片外层链接
if (x.parentNode._href) {
// 为了防止外层链接被立即触发,所以加个延时
setTimeout(() => x.parentNode.href = x.parentNode._href);
}
};
});
}, 10);
});
对markdown link+img 无效
[![]()]()
测试帖 https://hu60.cn/q.php/bbs.topic.103447.html
HUAWEI Mate X2(冰晶蓝)兔兔图床
@秀才,图片外面有个链接,没办法点击加载。你点击的同时肯定会触发外面那个链接啊。
@秀才,哦对了,如果只是想实现点击查看大图,现在虎绿林已经支持了,直接写
![]()
就能点击查看大图,不再需要套一层链接。@秀才,我又修改了一下,实现了对包含外层链接的图片的兼容。现在点击一次加载图片,点击两次打开链接。
@老虎会游泳,我改写了下,主要更新内容:
感觉还存在以下问题:
不知道有没有直接获取文件大小的方法。
目前是用
fetch
以HEAD
方法再发送一次请求,解析content-length
判定文件大小。HEAD
当GET
看,直接返回整个文件?还是和图片浏览器插件冲突。
按理说,我保留了原始
img
节点,onclick
啥的应该都还保留着?@老虎会游泳,有空能指教下,问题出哪儿不?
Redmi K30 Pro
@大尨,省流量
防止一打开页面,十几MB的图片、几十MB的音乐视频,哗哗地下,流量刷刷地跑,话费蹭蹭地掉
Redmi K30 Pro
@大尨,小众插件
@无名啊,冲突能解决吗
一加8Pro
@无名啊,我猜
viewer.js
是通过addEventListener的方式添加点击事件的。@无名啊,
有没有直接获取文件大小的方法
,有,file.hu60.cn
的文件大小在URL末尾。此外新上传的图片,alt
里也会有文件大小。@老虎会游泳,我用的我7楼的代码,有小概率能用上图片浏览器(此时正常,点击按钮重现图片后也正常),大部分时候被你的 footer.js 代替了,点击图片就新窗口打开
@老虎会游泳,旧图片、外站图片、音乐、视频啥的,好像没有提供文件大小
对这些情况,有啥更好的办法吗(除了
HEAD
再查询一次)@无名啊,所有位于file.hu60.cn的文件都可以使用
获取文件大小。
文件路径是这样生成的: