如何实现图片链接转img标签脚本的AJAX适配 解决翻页失效问题

原有脚本失效的核心原因 #

对比两段代码的运行链路就能直接定位问题：

• YouTube脚本把链接转播放器的逻辑封装成了独立可调用的函数，既在首次页面加载时跑一次覆盖已有内容，又绑定了全局ajaxComplete事件——只要AJAX请求完成、新的分页帖子内容插入DOM，就会自动重新执行转换逻辑，覆盖新插入的元素
• 你的图片转换脚本没有上述的分层结构：既没把转换逻辑封装成可重复调用的独立函数，也没绑定AJAX完成的触发回调，仅在首次页面加载时跑了一次全文档遍历。AJAX分页拉取的新帖子里的图片链接，根本不在脚本的执行扫描范围内，自然要手动刷新页面让脚本重新跑一次才会生效

按YouTube脚本的逻辑重构图片处理脚本 #

核心改动完全对齐YouTube脚本的运行机制，同时补充防重复渲染的逻辑，避免多次触发时出现元素叠加：

$(document).ready(function () {
    // 封装图片链接转img的核心逻辑，和YouTube脚本的独立函数结构保持一致
    function convertPostImageLinks() {
        // 和YouTube脚本保持相同的容器选择范围，避免全页面误匹配
        $("#content-content a").each(function () {
            const linkHref = $(this).attr("href");
            // 匹配目标图片格式的链接，跳过已处理过的元素
            const isImageLink = /\.(png|jpg|gif|tiff|webp)$/i.test(linkHref) && !$(this).hasClass("processed-image-link");
            
            if (isImageLink) {
                // 标记已处理，后续重跑时直接跳过
                $(this).addClass("processed-image-link");
                // 渲染img标签，若不需要保留原链接的点击跳转能力，可直接将a标签替换为img
                $(this).html(`<img src="${linkHref}" alt="帖子内嵌图片" style="max-width: 100%;" />`);
            }
        });
    }

    // 页面初始加载时先执行一次转换，处理已有内容
    convertPostImageLinks();

    // 绑定全局AJAX完成回调，和YouTube脚本的触发逻辑完全对齐
    $(document).ajaxComplete(function () {
        convertPostImageLinks();
    });
});

关键优化说明 #

• 防重复渲染：通过给已处理的链接添加processed-image-link标记类，避免多次触发AJAX回调时，在同一个链接内叠加多层img标签导致样式错乱
• 选择器范围对齐：和YouTube脚本统一在#content-content内容容器内遍历，不会误处理导航栏、侧边栏等非帖子区域的格式匹配链接
• 若不需要保留原图的点击跳转能力，可将内部渲染逻辑替换为$(this).replaceWith()，直接把a标签替换为纯图片元素，展示更简洁

内容的提问来源于stack exchange，提问作者V8 Power