I have the following script which take a string with html information (containing also reference to images).

When I create a DOM element the content for the image is being downloaded by the browser. I would like to know if it is possible to stop this Beauvoir and temporary prevent loading.

I am targeting web-kit and presto browsers.

  relativeToAbosluteImgUrls: function(html, absoluteUrl) {
        var tempDom = document.createElement('div');
        debugger
        tempDom.innerHTML = html;
        var imgs = tempDom.getElementsByTagName('img'), i = imgs.length;
        while (i--) {
            var srcRel = imgs[i].getAttribute('src');
            imgs[i].setAttribute('src', absoluteUrl + srcRel);
        }
        return tempDom.innerHTML;
    },

I have the following script which take a string with html information (containing also reference to images).

When I create a DOM element the content for the image is being downloaded by the browser. I would like to know if it is possible to stop this Beauvoir and temporary prevent loading.

I am targeting web-kit and presto browsers.

  relativeToAbosluteImgUrls: function(html, absoluteUrl) {
        var tempDom = document.createElement('div');
        debugger
        tempDom.innerHTML = html;
        var imgs = tempDom.getElementsByTagName('img'), i = imgs.length;
        while (i--) {
            var srcRel = imgs[i].getAttribute('src');
            imgs[i].setAttribute('src', absoluteUrl + srcRel);
        }
        return tempDom.innerHTML;
    },

• javascript
• jquery

• 3 As soon as you set the src attribute, loading will start. So a solution would be to not set the src attribute until when you want the loading to start. – rid Commented Oct 3, 2013 at 13:29
• 1 It will download once it has a value for src. The only way you can stop it downloading is to stop it before it's sent to the client (server-side script). How is the page created - is it html/php/asp etc.? Don't accept client-side suggestions as you can't stop it at the browser - it's too late. – Reinstate Monica Cellio Commented Oct 3, 2013 at 13:29
• 3 Set a custom data-src attribute that holds the source, and when you want the image to load, set the actual src attr – tymeJV Commented Oct 3, 2013 at 13:29
• when calling this method I pass html. html contain code like <img src="mysite.com/smiley.gif" alt="Smiley face" height="42" width="42"> for my understanding the loading start at tempDom.innerHTML = html; so when I do tempDom.getElementsByTagName... the image are already downloaded – GibboK Commented Oct 3, 2013 at 13:33

4 Answers 4

Store the src path into an HTML5 data-* attribute such as data-src. Without src being set, the browser will not download any images. When you are ready to download the image, simply get the URL from the data-src attribute and set it as the src attribute

$(function() {
    // Only modify the images that have 'data-src' attribute
    $('img[data-src]').each(function(){
        var src = $(this).data('src');
        // modify src however you need to, maybe make
        // a function called 'getAbsoluteUrl'
        $(this).prop('src', src);
    });
});

The approach taken by popular image library, Slimmage, is to wrap your img tags in noscript tags:

<noscript class="img">
  <img src="my-image.jpeg" />
</noscript>

Web scrapers and people with JS turned off will see the image as if the noscript wasn't there but other browsers will completely ignore the noscript and img tags.

You can then use JavaScript to do whatever you want with it, for example (using jQuery):

$('noscript.img').replaceWith(function(){
    return $(this.innerText).removeAttr('src');
});

I think you should reverse the logic, don't load the images by default and at the moment the image is needed, update it's src attribute to tell browser to start loading.

Or even better way would be to use some jquery lazy image loading plugin like this one:

http://www.appelsiini.net/projects/lazyload

Hope this helps.

To prevent images from being show, you could use this.

    $(window).loaded( function() { 
$("img").removeAttr("src");
 });

It might be tricky and give unexpected results, but it does it.