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

Question

A small question that I hope someone can answer.

I am creating this personal chrome extension to help me test content manipulation on different sites. On one of these sites, I simply replace the existing <img> another image and wrap the jquery replaceWith() function in the $(document).ready() function.

While navigating the page, however, you can see the original image in a split second before it changes them.

Is there a way to stop the download page before completing the image sharing?

Answer 1

Presumably, the <img> element is uniquely identified in some way (for example, the src or id attribute). If so, quickly add a stylesheet when creating the document, this stylesheet should be aimed at the <img> element and hide it from the site. Then during your .ready() handler, disable / delete 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

not. any attempt to do this will result in the page not being “ready,” which will result in you not reaching the state in which you can change the image.

Answer 3

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

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

Answer 4

This can be difficult to handle, because after the page has finished loading, you need to wait until the image is fully loaded and you cannot avoid it. but you can use something like this:

You can set the image download source before the final image is successfully downloaded.

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

hope this helps
Relationship