最近在使用 obsidian 剪藏微信公众号的内容的时候,发现有些图片丢失了。这是因为懒加载导致的。
微信文章中的图片通常采用懒加载技术,即图片的 src属性初始是一个占位符,真正的图片地址藏在 data-src属性中。如果 Web Clipper 抓取时没有触发图片加载,它就会抓到无效的占位符。
操作步骤:在点击剪藏按钮前,手动将文章页面滚动到最底部,确保所有图片都已完成加载(即从 data-src替换到了 src)。此时再进行剪藏,成功率会大幅提升。
还有个更好的方法,就是使用油猴脚本,下面是我自定义的油猴脚本,代码如下:
// ==UserScript==
// @name 微信文章自动加载图片
// @namespace http://tampermonkey.net/
// @version 0.1
// @description 自动将微信文章的 data-src 转为 src,方便剪藏
// @author You
// @match *://mp.weixin.qq.com/*
// @grant none
// ==/UserScript==
(function() {
'use strict';
// 监听DOM变化,确保动态内容也能被处理
const observer = new MutationObserver(() => {
document.querySelectorAll('img[data-src]').forEach(img => {
img.src = img.dataset.src;
});
});
observer.observe(document.body, { childList: true, subtree: true });
// 初始执行一次
document.querySelectorAll('img[data-src]').forEach(img => {
img.src = img.dataset.src;
});
})();此后打开任何公众号文章,图片会自动加载,无需任何手动操作,直接剪藏即可。
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。