使用jquery的ready()函数仍然不够快？有什么好的想法吗？

Question

希望有人能回答一个小问题。

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

然而，在导航到该页面时，您仍然可以在交换它们之前的瞬间看到原始图像。

是否有任何方法可以阻止页面加载，直到图像交换完成？

- Chaz

---

这是一个很好的问题，但不幸的是，如果没有对DOM结构（即HTML或样式表）的本地访问权限，您必须等待元素构建完成后才能操作它。 - 65Fbef05

使用.live()或.delegate()可能会在文档准备就绪之前执行元素，但这并不一定。这完全取决于浏览器在渲染期间如何/何时/执行什么。 - Wiseguy

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
});

- Andy E

---

Chrome浏览器是否带有内容脚本的样式表选项？ - mattsven

Answer 2

不行。任何尝试这样做的操作都会导致页面无法“准备就绪”，这将使您无法达到可以更换图像的状态。

- FatherStorm

Answer 3

这只是一个想法 - 不确定是否可行，但如果你非常需要，值得一试。

在代码中加入 $('img').live('onload', function(){...}) ，其中用一个指向空白图片的URL或者什么都不填来替换图片的 src。这应该足够快地阻止图片显示，然后当 document.ready 调用时，你可以替换相关的图片。

- Herman Schaaf

---

根据jQuery和其余JavaScript加载的时间，仍有可能首先加载图像。 - Steve Costello

当然，显然需要先加载此JavaScript代码才能发挥其作用 - 如果不可能，那就没有什么希望了。 - Herman Schaaf

由于它是一个Chrome扩展程序，我不确定我能直接控制脚本加载的位置。 - Chaz

@Chaz：即使如此，使用这种方法可以在最短的时间内完成，考虑到您的限制条件——这可能比$(document).ready稍微早一些。 - Herman Schaaf

Answer 4

这可能很难处理，因为在页面加载事件完成后，您需要等待图像完全加载，而且您无法避免这种情况。但是您可以使用类似于以下内容的东西：

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

$('imageControl').load(function(){
    // 当图像完全加载时执行某些操作
})
.error(function(){
    // 处理图像未加载的情况
})
.attr('src', 'image source');

希望这有所帮助，
敬礼

- Edgar