今天上推特的时候突然发现昨天重置chrome之后油猴脚本没开,才想起来自己曾经写过将推特的jpg:large转化为jpg方便直接另存为图片的脚本。
遂打开代码怀旧(油猴显示356days unchanged)
然后我就发现这么一些代码

// $(setInterval(function() {
// //alert("");

// var a=$("img[src*='jpg:large']");
// a.each(function(){
// //alert($(this).attr("src"));
// $(this).attr("src",String($(this).attr("src")).replace(/jpg:large/,"jpg"));
// //alert($(this).attr("src"));
// });
// var b=$("img[src*='png:large']");
// b.each(function(){
// $(this).attr( "src",String($(this).attr("src")).replace(/png:large/,"png"));
// });
// //alert("");
// }),200);

当然现在都被我注释掉了,
当时为了解决推特下拉加载出来的新的dom元素中间图片的替换问题,没找到监听dom变化的函数,只能setinterval(),后果就真的很占用cpu,造成这一年来我一直以为推特就是个很占cpu的网页(捂脸
遂随手搜索了一下有没有监听dom变化的函数
一开始搜到的是jquery的DOMNodeInserted事件,
查阅后mdn后被推荐MutationObserver函数,
尝试之发现效果不错
现在代码为:

// Select the node that will be observed for mutations
var targetNode = $("body")[0];

// Options for the observer (which mutations to observe)
var config = { attributes: true, childList: true, subtree: true };

// Callback function to execute when mutations are observed
var callback = function(mutationsList) {

var a=$("img[src*='jpg:large']");
a.each(function(){
//alert($(this).attr("src"));
$(this).attr("src",String($(this).attr("src")).replace(/jpg:large/,"jpg"));
//alert($(this).attr("src"));
});
var b=$("img[src*='png:large']");
b.each(function(){
$(this).attr( "src",String($(this).attr("src")).replace(/png:large/,"png"));
});
//alert("");
};

// Create an observer instance linked to the callback function
var observer = new MutationObserver(callback);

// Start observing the target node for configured mutations
observer.observe(targetNode, config);

本着拿来就用主义原则(明天还要考毛概我现在跑来干这个= =),并没有对mdn上的事例代码做过多的修改。
有效的降低了cpu占用(bgm38)(空闲时至少20%)

One thought to “解决推特jpg:large,监听dom元素内容变化的函数,MutationObserver”

Leave a comment

电子邮件地址不会被公开。 必填项已用*标注