5

is there a way to halt the image download with javasript? I would like to extract all urls from the image tags and start the image loading only when the user scrolls to a specific one. I know that I can stop the download via

window.stop()

But by using this workaround the browser stops also loading the background images which are defined in the CSS file(s).

So is there a way to achieve this without implementing a "markup workaround" such as "including the image url into a span or something".

Nightfirecat
  • 11,432
  • 6
  • 35
  • 51
notion
  • 47
  • 1
  • 3
  • 3
    This is called lazy loading. Try [this](http://stackoverflow.com/questions/3139685/how-do-i-only-load-an-image-when-the-user-scrolls-to-it) question or [this](http://www.google.co.uk/search?sourceid=chrome&ie=UTF-8&q=jquery+lazy+loading) Google search. – Alex Sep 15 '11 at 21:16
  • Yes, lazy loading. I've seen this Plugin from Mika Tuupola. The problem is that the current browser generation has some problems with this solution. I have implemented a test case for analyzing the network interaction. The browser starts the image download although I removed the "src value". So in fact I am searching for a solution that gives me the possibility to stop all image downloads after the DOM is ready. – notion Sep 15 '11 at 21:24
  • And: I don't want to break the image tag structure. This is the problem. @Alex in the post above a solution was to move the image url from the "src" to a "thumb" attribute. This will end in an invalid html document. – notion Sep 15 '11 at 21:27
  • 1
    If you're using an HTML5 doctype, you could move it to a `data-` attribute, say `data-thumb`? – Alex Sep 15 '11 at 21:40
  • Well, of course :) That sounds great. I will give it a try. Thank you very much, Alex. – notion Sep 15 '11 at 21:46

2 Answers2

1

You can remove the src attribute entirely using JavaScript, this will effectively stop the images from being downloaded.

var img = document.getElementById('imageID'),
    src = img.getAttribute('src');

img.removeAttribute('src');

This will ensure your images will still be loaded if a user has JS disabled, because you are removing the src attributer later on using JS.

You can then store the url in a variable and set it back when you want to load them again.

img.setAttribute('src', src);

The key point it not leaving an empty src attribute (src=""), otherwise it will be treated by the browser as '/', actually trying to load your home page and store it in the image element. You have to remove the src attribute entirely.

Jose Faeti
  • 12,126
  • 5
  • 38
  • 52
  • That's really innovative. The resulting HTML won't be correct AFAIK because the src attribute is required, but if browsers reliably render it the same then great. – Nathan MacInnes Sep 15 '11 at 21:57
  • 4
    I have tried this. Also to remove the complete "src attribute". If you have a look in your development console (e.g. Firebug or Chrome Developer Toolbar) then you will see that the browser will still load the images into the cache. Removing the "src attribute" will not work. – notion Sep 15 '11 at 22:03
  • How about removing the image entirely then? – Jose Faeti Sep 15 '11 at 22:06
  • Checked it. The same problem. The script will be executed after the DOM is ready. So it seems that the browser queued all image transfers already before the script will be executed. – notion Sep 15 '11 at 22:09
  • Seems like that. But are you sure removing the src doesn't work? Try empty the cache or changing the image loaded. When I use that trick, the browser download bar disappears and it states the page is loaded, even if the images stopped. – Jose Faeti Sep 15 '11 at 22:13
  • Meanwhile I found another answer related to the same problem [here](http://stackoverflow.com/questions/1667868/prevent-images-from-loading/1667886#1667886). The solution was the same, but perhaps it's not working anymore on newer browsers. – Jose Faeti Sep 15 '11 at 22:22
  • No, I tried exactly the same. No success :( Jose, thank you very much for your kind help. Maybe we find a solution someday. What do you think? :) – notion Sep 15 '11 at 22:32
  • Let's see, I would really like to find a solution to this. I will keep searching and trying in my free time! – Jose Faeti Sep 16 '11 at 06:41
  • Firefox 30 here, removing the src attribute aborts an image transfer right away, confirmed looking at the /server-status page before and after cancelling a long download. However, it makes sense that if the "aborting" script is called on "onload", the images will have been transferred already. It wasn't my original goal, but to OP, I recommend placing the script to the end of the page so that the DOM is complete and then moving src to data-src synchronously. – Zdenek Jun 19 '14 at 16:45
0

I had a similar problem and here's how I solved it:

In a nut shell:

When creating the element I made src='Blank.gif' and I created setAttribute("data-src",response[i].photo_url). Seeing as Blank.gif doesn't exist, it would be rendered as a broken image link if the below didn't work, or it cant load fast enough...

Then, onscoll i checked to see when it was in view and set the src to the 'data-src'. This works very well for me...

The details!

window.onscroll = function() {

  var top = document.body.scrollTop;
  var bottom = document.documentElement.clientHeight + top;

  var img;

  for (var i=startImage;i<index;i++){
    img = document.getElementById("image" + i);
    var a = img.style.top.substring(0,img.style.top.length-2);
    var b = bottom;//Just for simplicity...
    if (a < b) {
        if (img.src.indexOf('Blank.gif') != -1) {
            img.src = img.getAttribute("data-src");
        }
        startImage++;
    }
  }
}

Hope this can save someone else 2 1/2 hours of searching/work!

Feel free to let me know if you think there's a way to make the above more efficient!

Dave
  • 187
  • 2
  • 12