4

There are tons of ways to detect if a page is loaded. However I want to do this continuously and couldn't find a way that is working.

To explain what continuously mean, let me give an example. In a page,

  • user clicks somewhere and request a new image to be loaded. this triggers buffering of some images.

  • JS code automatically buffers some images continuously.

So I want to check if in the page there is no image left to be loaded (also, there is no image in the process of downloading).

[I want be able to understand if every image finished being downloaded/buffered/cached. So that I can request buffering of new images.]

I plan to do the thing in brackets infinite times while limiting number of buffered images.

Here you can sample relevant code: https://stackoverflow.com/questions/35650853/how-to-buffer-next-200-images-when-the-page-is-not-loading-anything

Community
  • 1
  • 1
user3722246
  • 151
  • 4
  • *"I plan...an infinite loop"* - An infinite loop will lock up the page. Use a function that uses setTimeout() to schedule another call to itself every X milliseconds. – nnnnnn Feb 26 '16 at 12:57
  • 2
    Have you considered using the (on)load event for your images, to keep track of which images have finished loading? Keep a count of how many are in progress, and when that count falls below some threshold you can kick off the next batch. – nnnnnn Feb 26 '16 at 13:01
  • 2
    Keep an array of loading images, once they have loaded remove them from that array – Tomas Feb 26 '16 at 13:01
  • @Tom, can you write a sample code for that? How to figure out if an image has loaded? Also how to differentiate an image that is buffered and invisible, and another image that is loaded and visible? Are they the same thing in this context? – user3722246 Feb 26 '16 at 13:14
  • @nnnnnn I'm not sure what "onload event for an image" is. I'm a beginner so if you can write a sample code for that, it would be great. – user3722246 Feb 26 '16 at 13:16
  • @user3722246 me and nnnnnn have given you enough information for you to research what you need.. Dont ask us to write code for you. this is pretty standard stuff. If you dont know what onload event means you should go back to JS basics – Tomas Feb 26 '16 at 13:48
  • @Tom Ok just 1 question. how to differentiate an image that is buffered and invisible, and another image that is loaded and visible? I think they the same thing in this context. Right? For example `$('img')` can refer to both – user3722246 Feb 26 '16 at 14:06
  • @user3722246 depends on what do you mean by "visible" If you just add the image to DOM, the moment it will load it will be visible. If you load it without actually appending it to the DOM, you will know if its appended or not, if you append it but hide it while loading, you will know if its hidden/displayed, If you loading it while scrolling and want to know if its in viewport, you can check how far you scrolled. Virtually 100s of ways to go about what you asking. You need to provie details of what exactly you doing for us to be able to help – Tomas Feb 26 '16 at 15:19
  • @Tom Sorry for not making it clear, this is exactly what I'm referring to: http://stackoverflow.com/questions/35650853/how-to-buffer-next-200-images-when-the-page-is-not-loading-anything – user3722246 Feb 26 '16 at 15:26

1 Answers1

2

Check if document is loaded:

$( document ).ready(function() {
  //Your code goes here.
});

Check if images are loaded:

$('img').each(function(i, e){
    var img = new Image();
    img.onload = function() {
        console.log($(e).attr('src') + ' - Loaded!');
        $(e).attr('loaded', true);
    }
    img.src = $(e).attr('src');
});
rodrix
  • 470
  • 6
  • 17