Small question that I hope someone can answer.

I'm creating this personal chrome extension to help me test out content manipulation on various sites. On one of these sites, I am simply replacing an existing <img> with a different image and wrapping that jquery replaceWith() function in $(document).ready() function.

When navigating to the page, though, you can still see the original image for a split second before it swaps them.

Is there any way to arrest the loading page until the image swap pletes?

Small question that I hope someone can answer.

I'm creating this personal chrome extension to help me test out content manipulation on various sites. On one of these sites, I am simply replacing an existing <img> with a different image and wrapping that jquery replaceWith() function in $(document).ready() function.

When navigating to the page, though, you can still see the original image for a split second before it swaps them.

Is there any way to arrest the loading page until the image swap pletes?

• javascript
• jquery
• google-chrome-extension
• document-ready

• 2 This is a great question, but unfortunately without native access to the DOM construction (ie. html or stylesheet), you'll have to wait for element construction before you can manipulate it. – 65Fbef05 Commented Apr 20, 2011 at 18:31
• 1 Using .live() or .delegate() might execute as elements bee available before document ready state, but it probably won't. It all depends on how/when/what browsers execute during rendering. – Wiseguy Commented Apr 20, 2011 at 18:34

4 Answers 4

Presumably, the <img> element is uniquely identifiable in some way (such as it's src attribute or an id). If that's the case, quickly add a stylesheet when the document is created, this stylesheet should target the <img> element and hide it from site. Then, during your .ready() handler, disable/remove the stylesheet.

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

no. any attempt to do that will result in the page not being "ready" which will result in you not reaching a state where you can swap the image out.

Just an idea - not sure whether this will work, but if you're desperate, it's worth a try.

Put in a $('img').live('onload', function(){...}) where you replace the image src either with an url that points to a blank image, or nothing at all. That should be fast enough to stop the image from showing, and then when document.ready calls, you can replace the images in question.

This could be difficult to handle because after the page load event is pleted you need to wait until image is loaded pletely and you cannot avoid this. but you can use something like this:

you can set an image loading source before the final image is loaded successfully

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

hope this helps,
Regards