CODEWITHSUNDEEP
javascriptjquerypage-load-time
Joy
Joy

Reputation: 7028

Calculating all resources loaded on page

I am loading a page which has CSS + images + scripts . So I want to calculate all the number of total resources loaded onto the page on runtime on page load So that i can show a progressbar based on that calculations and a little bit of load time .

My question is how to calculate how many number of resources are actually loaded into the dom including images + scripts + css files . And based on that I need to calculate the progressbar progress pattern and make it proceed .

Can someone throw some light how to do that ?

Upvotes: 0

Views: 1588

Answers (4)

Eli O.
Eli O.

Reputation: 2101

This a Vanilla Javascript, more complete answer following @Alaa Badran's answer

It only counts the number of elements of the page, but you might create a counter from this to get how many elements are left to load.

It counts all loaded CSS stylesheets as well as all HTML elements that support loading external contents with the "src" attribute (so it avoids counting "placeholders" elements, initially not loading external contents)

function countElementsLoadingContent() {
  // Counts the number of elements loading content on the page
  const htmlTagsLoadingContent = [
    "img",
    "script",
    "video",
    "audio",
    "iframe", 
    "source", 
    "track", 
    "embed", 
    "object"
  ]
  const elements = document.querySelectorAll(htmlTagsLoadingContent.join(','))
  let elementsWithSrc = 0
  for (let i = 0; i < elements.length; i++) {
    if (elements[i].src) {
      elementsWithSrc++
    }
  }

  const cssLinks = document.querySelectorAll('link[rel="stylesheet"]')

  const totalElements = elementsWithSrc + cssLinks.length
  console.log(`Total elements on the page that load content: ${totalElements}`)
  return totalElements
}

Upvotes: 0

Alaa Badran
Alaa Badran

Reputation: 1858

The total number is:

$('script, link[type=text/css], img').size();

This will return the total number of resources your requested.

Upvotes: 0

Marcelo De Zen
Marcelo De Zen

Reputation: 9507

There is not a straight forward way to do this. Script and image tags has the load event, so you can attach a callback and know when they are loaded. Css has no events or properties to query, however you can use a workaround using an img tag. But this is not so simple because if you attach a callback to a script tag that is already loaded, that callback will never fire up, same for img tags. So when your progress bar start to track all img/script/css on the document, it will need to know what img/script/css is already loaded and then attach an event callback for the others that are not loaded yet. Img tags has a complete property, but script do not, so you cannot know if a script is loaded or not by simply querying the DOM. Css is more trick.

Well, as you can see this is not a simple task, actually it is complicated and personally I do not think it's worth spending time and effort into it just to display a progress bar.

Display a old and good spin in your page and be happy :)

Upvotes: 0

Andy Davies
Andy Davies

Reputation: 5824

I think you're approaching the problem the wrong way around...

If your page is so big that it needs a progress bar then it's probably too big.

Why not optimise the page so that it starts rendering quickly and the other items are added in afterwards e.g. progressively or lazy loaded.

Upvotes: -1

Related Questions