希望有人能回答一个小问题。
我正在创建一个个人的Chrome扩展程序,以帮助我在各种网站上测试内容操作。在其中一个网站上,我只是用不同的图像替换了现有的<img>
并将jquery replaceWith()
函数包装在$(document).ready()
函数中。
然而,在导航到该页面时,您仍然可以在交换它们之前的瞬间看到原始图像。
是否有任何方法可以阻止页面加载,直到图像交换完成?
希望有人能回答一个小问题。
我正在创建一个个人的Chrome扩展程序,以帮助我在各种网站上测试内容操作。在其中一个网站上,我只是用不同的图像替换了现有的<img>
并将jquery replaceWith()
函数包装在$(document).ready()
函数中。
然而,在导航到该页面时,您仍然可以在交换它们之前的瞬间看到原始图像。
是否有任何方法可以阻止页面加载,直到图像交换完成?
假设<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
});
不行。任何尝试这样做的操作都会导致页面无法“准备就绪”,这将使您无法达到可以更换图像的状态。
这只是一个想法 - 不确定是否可行,但如果你非常需要,值得一试。
在代码中加入 $('img').live('onload', function(){...})
,其中用一个指向空白图片的URL或者什么都不填来替换图片的 src
。这应该足够快地阻止图片显示,然后当 document.ready
调用时,你可以替换相关的图片。
这可能很难处理,因为在页面加载事件完成后,您需要等待图像完全加载,而且您无法避免这种情况。但是您可以使用类似于以下内容的东西:
您可以在最终图像成功加载之前设置图像加载源
$('imageControl').load(function(){
// 当图像完全加载时执行某些操作
})
.error(function(){
// 处理图像未加载的情况
})
.attr('src', 'image source');
希望这有所帮助,
敬礼
.live()
或.delegate()
可能会在文档准备就绪之前执行元素,但这并不一定。这完全取决于浏览器在渲染期间如何/何时/执行什么。 - Wiseguy