Question

我希望有人能回答的小问题。

我正在创建此个人Chrome扩展程序，以帮助我测试各种网站上的内容操作。在其中一个网站上，我只是用一个不同的图像替换现有的<img>，并在replaceWith()函数中包装该jquery $(document).ready()函数。

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

在图像交换完成之前，有没有办法阻止加载页面？

Answer 1

据推测，<img>元素在某种程度上是唯一可识别的（例如它的src属性或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
});

Answer 2

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

Answer 3

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

使用指向空白图像的网址替换图像$('img').live('onload', function(){...})放置src，或者根本不添加任何内容。这应该足够快以阻止图像显示，然后在document.ready调用时，您可以替换相关图像。

Answer 4

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

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

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

希望这会有所帮助，
此致

使用jquery ready（）函数但仍然不够快？想法？

4 个答案: