7

小问题，希望有人能解答。

我正在创建这个个人 chrome 扩展来帮助我测试各种网站上的内容操作。在其中一个站点上，我只是将现有的图像替换<img>为不同的图像，并将该 jqueryreplaceWith()函数包装在$(document).ready()函数中。

但是，当导航到页面时，您仍然可以在交换它们之前看到原始图像一瞬间。

在图像交换完成之前，有什么方法可以阻止加载页面？

4

4 回答 4

4

据推测，<img>元素以某种方式是唯一可识别的（例如它的src属性或 an id）。如果是这种情况，请在创建文档时快速添加样式表，此样式表应以<img>元素为目标并将其从站点中隐藏。然后，在您的.ready()处理程序期间，禁用/删除样式表。

var ss = document.createElement("style");
ss.textContent = "img[src='/path/to/img.png'] { visibility: hidden; }";
document.documentElement.childNodes[0].appendChild(ss);

$(document).ready(function () { 
    ss.parentNode.removeChild(ss);

    // swap image here
});
于 2011-04-20T18:43:01.787 回答
2

只是一个想法 - 不确定这是否可行，但如果你绝望，值得一试。

放入一个$('img').live('onload', function(){...})你用src指向空白图像的 url 替换图像的地方，或者什么都没有。这应该足够快以阻止图像显示，然后在document.ready调用时，您可以替换有问题的图像。

于 2011-04-20T18:35:58.490 回答
2

不。任何这样做的尝试都将导致页面未“准备好”，这将导致您无法达到可以交换图像的状态。

于 2011-04-20T18:30:41.093 回答
0

这可能很难处理，因为在页面加载事件完成后，您需要等到图像完全加载并且您无法避免这种情况。但你可以使用这样的东西：

您可以在最终图像成功加载之前设置图像加载源

$('imageControl').load(function(){
    // do something when image is loaded completely
})
.error(function(){
    // handle if the image is not loaded
})
.attr('src', 'image source');

希望这会有所帮助，
问候

于 2011-04-20T18:58:43.820 回答