【脚本】论坛列表显示图片0.5
现在搜索页面也能预览图片了@Name @Match
// ==UserScript==
// @name 显示图片
// @version 0.5
// @description论坛列表显示图片（适配搜索页面
// @author M&U
// @match https://www.gamemale.com/*
// @exclude https://www.gamemale.com/forum.php
// @grant GM_addStyle
// @grant GM_getValue
// @grant GM_setValue
// @grant GM_xmlhttpRequest
// ==/UserScript==
(function () {
'use strict';
const TYPE_HANDLERS = [
{
name: "discuz",
articleListSelector: 'tbody:not(',
articleLinkSelector: '.icn a',
postContentSelector: 'div .plc',
postImageLinkCallback: function (element) {
return element.getAttribute('file') || element.getAttribute('src');
}
},
{
name: "discuz_search",
articleListSelector: '.slst.mtw li.pbw:not()',
articleLinkSelector: 'h3.xs3 a',
postContentSelector: 'div .plc',
postImageLinkCallback: function (element) {
return element.getAttribute('file') || element.getAttribute('src');
}
}
];
const IGNORE_IMAGES = [
/smile|avatar|icon|face|emoji|emoticon/i,
/uc_server|static\/image|data\/avatar/i,
/\.gif(\?|$)/i
];
let enabled = typeof GM_getValue !== 'undefined' ? GM_getValue('enabled', true) : true;
const toggleButton = document.createElement('button');
toggleButton.textContent = enabled ? '关闭预览' : '开启预览';
toggleButton.style.position = 'fixed';
toggleButton.style.bottom = '20px';
toggleButton.style.right = '20px';
toggleButton.style.zIndex = '9999';
toggleButton.style.padding = '5px 10px';
toggleButton.style.background = '#4CAF50';
toggleButton.style.color = 'white';
toggleButton.style.border = 'none';
toggleButton.style.borderRadius = '3px';
document.body.appendChild(toggleButton);
GM_addStyle(`
.image-row {
display: flex;
width: 100%;
margin: 10px 0;
flex-wrap: nowrap;
justify-content: flex-start;
gap: 10px;
}
.image-item {
flex: 0 0 auto;
height: 150px;
}
.preview-image {
height: 100%;
width: auto;
max-width: 300px;
object-fit: contain;
cursor: pointer;
border: 1px solid #ddd;
background: #f5f5f5;
border-radius: 3px;
}
.preview-image.zoomed {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
max-width: 90vw;
max-height: 90vh;
width: auto;
height: auto;
z-index: 1000;
background: #fff;
box-shadow: 0 0 15px rgba(0,0,0,0.5);
}
`);
toggleButton.addEventListener('click', function() {
enabled = !enabled;
if (typeof GM_setValue !== 'undefined') {
GM_setValue('enabled', enabled);
}
window.location.reload(true); // 强制从服务器重新加载页面
});
function init() {
if (!enabled) return;
// 检查当前页面类型
if (location.href.includes('forum') && !location.href.includes('search')) {
handleForum('discuz');
} else if (location.href.includes('search')) {
handleForum('discuz_search');
}
}
function handleForum(type) {
const handler = TYPE_HANDLERS.find(h => h.name === type);
if (!handler) return;
document.querySelectorAll(handler.articleListSelector).forEach(post => {
if (post.hasAttribute('data-enhanced')) return;
post.setAttribute('data-enhanced', 'true');
const link = post.querySelector(handler.articleLinkSelector)?.href;
if (link) loadImages(link, handler, post);
});
}
function shouldIgnoreImage(src) {
return IGNORE_IMAGES.some(regex => regex.test(src));
}
async function loadImages(url, handler, post) {
try {
const html = await fetch(url).then(r => r.text());
const doc = new DOMParser().parseFromString(html, 'text/html');
const content = doc.querySelector(handler.postContentSelector);
if (!content) return;
const row = document.createElement('div');
row.className = 'image-row';
const images = Array.from(content.querySelectorAll('img'))
.map(img => handler.postImageLinkCallback(img))
.filter(src => src && !shouldIgnoreImage(src))
.slice(0, 3);
images.forEach(src => {
const item = document.createElement('div');
item.className = 'image-item';
const image = document.createElement('img');
image.className = 'preview-image';
image.src = src;
image.loading = 'lazy';
image.addEventListener('click', () => {
document.querySelectorAll('.preview-image.zoomed').forEach(el => el.classList.remove('zoomed'));
image.classList.add('zoomed');
});
item.appendChild(image);
row.appendChild(item);
});
if (row.children.length > 0) {
const description = post.querySelector('p.xg1');
if (description && description.nextSibling) {
description.parentNode.insertBefore(row, description.nextSibling);
} else {
post.appendChild(row);
}
}
} catch (error) {
console.log('加载图片失败:', error);
}
}
init();
new MutationObserver(function(mutations) {
if (!enabled) return;
init();
}).observe(document.body, { childList: true, subtree: true });
document.addEventListener('click', function(e) {
if (e.target.classList.contains('zoomed')) {
e.target.classList.remove('zoomed');
}
});
})();
手机用户感觉还是需要慎用了，毕竟需要多消耗流量 这简直是个太实用的工具了吧，这样一来，搜索的时候也能够清晰的得到想要的答案，谢谢分享 喂喂喂，這個工具也太好用吧，馬住 ！好有意思啊！这样淘漫画的时候岂不是可以再外面看到图了 太好了，搜分期资源的时候能快速预览然后定位惹 实用满分的工具，可以直接看预览筛掉一些不符合喜好的了 这样可以提前知道帖子里的大概内容了，更好选出自己喜欢的帖子了 好耶，现在更方便快速锁定涩涩了！（弗图博士我可以{:4_86:}） 感谢大佬的脚本，现在直接可以在搜索页面看到图片是不是自己想要的 很实用的脚本惹，浏览体验感觉有点像贴吧了:$ 喝茶ing还挺方便的，还可以配合之前u老师的搜索优化一起用～ 请问需要把原来的删掉么，还是直接新建0.5就可以了 这个真的很方便，不用点进去就知道里面的图符不符合自己喜好了 很好用的脚本，可以很快的知道帖子的内容了 好厉害啊，然后其实注意力完全被弗图博士的贴子吸引了orz 非常好用的脚本，搜资源回帖都更加方便了，给楼主点赞 {:4_91:} 感觉搜索可以变得更直观了 看起来确实方便很多了 太好了非常感谢刚好想找点东西刚好能用上！~