在加载图像时替换它们
所以我想制作一个简单的脚本来代替网站上的图片(当然是小猫图片)。问题是，我希望脚本继续替换图片，因为我滚动在一个网站。
例如，在Google图片上，它只会为立即加载的图片加载小猫图像，而不会加载后面加载的其他图片。
如何才能使图像取代新加载的图像？我考虑过可能检测到内容负载，但不知道如何处理这个问题，因为我对所有的网站都是新手。
这是我的content.js代码：
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', replace);
} else {
replace();
}
function replace() {
let filenames = [
"0.jpg",
"1.jpg",
"2.jpg",
"3.jpg",
"4.jpg",
"5.jpg",
"6.jpg",
"7.jpg",
"8.jpg",
"9.jpg",
"10.jpg"
];
let imgs = document.getElementsByTagName('img');
for (image of imgs) {
let ran = Math.floor(Math.random() * 10);
console.log(ran);
let file = 'cat/' + filenames[ran];
let url = chrome.extension.getURL(file);
image.src = url;
}
}回答 1
Stack Overflow用户
发布于 2020-11-20 03:10:51
您可能希望查看MutationObserver对象。(https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver)
基本上，我们可以做的是要求文档的主体在页面修改满足多个条件之一时引发事件。在您的示例中，您希望查看子树修改，这样每次向页面添加更多内容时都会通知您，然后可以查看和修改它。
因为您的代码可以在一个页面上运行很多次，所以您有一个dilema。你已经改变了的图像该怎么办？他们应该再次改变还是保持他们的新形象？我使用.dataset api (https://developer.mozilla.org/en-US/docs/Web/API/HTMLOrForeignElement/dataset)设置了一个标志，指示图像已经更改，在随后的执行中应该被忽略。
下面是一个粗略的例子，可以让你开始学习。可以删除浏览器元素检查器中的水平规则元素以触发行为。
<!doctype html>
<html>
<head>
<script>
"use strict";
window.addEventListener('load', onWindowLoaded, false);
function onWindowLoaded(evt)
{
const targetNode = document.body;
const config = {attributes:true, childList:true, subtree: true};
const observer = new MutationObserver(callbackFunc);
observer.observe(targetNode, config);
function callbackFunc(mutationsList, observer)
{
for (const mutation of mutationsList)
{
if (mutation.type == 'childList')
updateImageSources();
}
}
}
function updateImageSources()
{
let allImages = document.querySelectorAll('img');
allImages.forEach( imgFunc );
function imgFunc(img, index, collection)
{
let filenames = ['0.jpg', '1.jpg', '2.jpg', '3.jpg', '4.jpg', '5.jpg',
'6.jpg', '7.jpg', '8.jpg', '9.jpg', '10.jpg'];
if (img.dataset.replaced == undefined)
{
img.dataset.replaced = true;
let randomIndex = Math.floor( filenames.length * Math.random() );
img.src = filenames[randomIndex];
}
}
}
</script>
</head>
<body>
<img><img><img>
<hr>
</body>
</html>https://stackoverflow.com/questions/64915921
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号