Tweak the load event on chrome extension

Question

I have created a google chrome extension to replace certain images from third party websites. I have implement all the programming part but one of my requirements states that

On a slower net connection the original images should not be visible until it’s replaced by the new images

I am not sure wether it is achievable or not. I want to know what sort of event I should attach here. Can experts give their input on this?

This is the work I have done.

// get current websites base url
var current_website = window.location.href;

//run the code on specific pages
if ($.inArray(current_website, config.target_websites) != -1) {

    config.image_config.forEach(function (obj) {


        var src = obj.src;
        var target = obj.target;

        /**find all the occurances in the <img> tag */
        var key = 'img[src*="' + src + '"]';
        var img = $(key);

        /**replace it with the target image*/
        img.attr('src', target);


        /** check the inline CSS*/
        $("[style*=background-image]").css('background-image', function (i, oldimg) {
            return oldimg.indexOf(src) == -1 ? oldimg : 'url(' + target + ')';
        });

        /***check all the external styles for the image*/
        $('*').each(function () {
            if ($(this).css('background-image').indexOf(src) != -1) {
                $(this).css('background-image', 'url(' + target + ')');
            }
        });


    });



}

score 1 · Accepted Answer · answered Jan 01 '16 at 17:36

Since you're already using jQuery, if you're not opposed to a small library (7.25 KB), you can use the jQuery plugin imagesloaded.

Basic usage:

// options
$('#container').imagesLoaded( {
  // options...
  },
  function() {
    // your code to run after load
  }
);

Then you could do a simple $('img').hide() on load, and $('img').show() after all images have loaded on your particular images.

You can see in the demo that it works for images which have been inserted dynamically into the page as well, which would meet your requirement for that the images of your key be hidden until replaced.

http://imagesloaded.desandro.com/

See this answer: http://stackoverflow.com/a/5114084/2694851 -- "In document_end, the files are injected immediately after the DOM is complete, but before subresources like images and frames have loaded." — bazeblackwood, Jan 01 '16 at 23:10

Tweak the load event on chrome extension

1 Answers1