Using jquery ready() function but still not fast enough? Ideas?

Question

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 completes?

Answer 1

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

Answer 2

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.