Question

我想在GreaseMonkey（Mozilla Firefox）上使用此JavaScript更改网站图像：

// saves all settings of all <img> tags in the tags variable/array
var tags = document.getElementsByTagName('img');

// goes through every entry in the tags array, so through every <img> tag
for (var i = 0; i < tags.length; i++) {
 tags[i].src = tags[i].src.replace('http://gf1.geo.gfsrv.net/cdnf0/af41c52dc08208b4463f4a4608e88c.png', 'http://gf1.geo.gfsrv.net/cdnf2/32926d2ee2884eab5015c14c73afa3.png');
}

问题是用户在脚本更改之前会看到旧图像。我试着用：

// @run-at document-start

但这不是一个好主意，因为我无法更改尚未加载的图像。

我尝试使用JQuery方法优化代码但是我失败了。我找不到任何方法来避免图像替换产生的闪烁。有什么我可以做的吗？

这是HTML代码：

<div class="smallplanet" id="planet-34020483">
<a href="http://s127-es.ogame.gameforge.com/game/index.php?page=overview&amp;cp=34020483" title="" class="planetlink  tooltipRight js_hideTipOnMobile">
<img class="planetPic js_replace2x" src="http://gf1.geo.gfsrv.net/cdnf0/af41c52dc08208b4463f4a4608e88c.png" height="30" width="30">
<span class="planet-name  ">XXXX</span>
<span class="planet-koords  ">[X:XXX:X]</span>
</a>
</div>

Answer 1

您可以尝试隐藏旧图像，更改属性并再次显示。像这样的东西（需要测试）：

var tags = document.getElementsByTagName('img');
tags[0].hide()
tags[0].attr('src', 'http://gf1.geo.gfsrv.net/cdnf2/32926d2ee2884eab5015c14c73afa3.png')
tags[0].show()

Greasemonkey脚本的Javascript优化？

1 个答案: