CODEWITHSUNDEEP
javascripthttpbrowser
notion
notion

Reputation: 47

Try to stop image loading with javascript

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

Upvotes: 5

Views: 4968

Answers (2)

Dave
Dave

Reputation: 189

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!

Upvotes: 0

Jose Faeti
Jose Faeti

Reputation: 12314

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.

Upvotes: 1

Related Questions