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".

Improve this question
5
  • 3
    This is called lazy loading. Try this question or this Google search. Commented Sep 15, 2011 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. Commented Sep 15, 2011 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. Commented Sep 15, 2011 at 21:27
  • 1
    If you're using an HTML5 doctype, you could move it to a data- attribute, say data-thumb? Commented Sep 15, 2011 at 21:40
  • Well, of course :) That sounds great. I will give it a try. Thank you very much, Alex. Commented Sep 15, 2011 at 21:46

2 Answers 2

Reset to default
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.

Improve this answer
Sign up to request clarification or add additional context in comments.

9 Comments

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.
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.
How about removing the image entirely then?
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.
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.
|
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!

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.