Load all images and scripts for full website at once?

Question

Is there anyway to load all images and scripts, not from the current webpage, but from the entire website on first load so that it's all cached.

I know this may not be best practice, but will come in handy.

Answer 1

Preface

Firstly, this is a bad idea . It will make your page load slower than it needs to, wasting your server resources and bandwidth on content that a visitor to your site might not even need (ie they only load that one page). Still, if this is really what you want, lets do this:

Scripts

We can load scripts dynamically using Javascript:

var scriptUrls = ["a.js","b.js","c.js"];
for (i=0;i<scriptUrls.length;i++) {
    var script = document.createElement("script");
    script.src = scriptUrls[i];
    document.head.appendChild(script);
}

In scriptUrls we define the paths from the file to the scripts that we want to load;
Then we loop through for every item in scriptUrls ;
We create a new DOM element using document.createElement("script") - this makes a new <script> element - and assign this to be the value of the variable script ;
We set the src (source) attribute to be the value of the current URL in scriptUrls ;
And then we add the script element to the <head> of the HTML document ( document.head ) using the .appendChild method.

This is all we need to load scripts.

Images

Images can be loaded in a similar fashion using Javascript, with a few differences:

var imgs = [];
var imgUrls = ["a.png","b.jpg","c.gif"];
for (i=0;i<imgUrls.length;i++) {
    imgs.push(new Image());
    imgs[i].src = imgUrls[i]
}

imgs is in empty array, where we can store the image objects while they load. You can still use them on the page afterwards using the normal method <img src="..."> ; this is just a temporary thing to allow them to load properly;
imgUrls is just an array of the URLS of all the images that you want to load;
Now, we loop through imgUrls ;
new Image() creates a new Image object ( https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/Image ). We add this to the end of the imgs array imgs.push ;
Now, we set the source src of the image ( imgs[i].src to the current item in the imgUrls array ( imgUrls[i] ).

This is all we need to load images.

Note

You would put this as the first script in your head section. Just like, put all of this code in a JS file (ie load.js ) and include it ( <script src="load.js"></script> ).

Answer 2

Yes, but it's not pretty or efficient.

All you need to do is include every script, link, reference, image, css and whatnot on your first page. For example:

<!DOCTYPE html>
<html>
<head>
  <script src="script_for_page_1" />
  <script src="script_for_page_2" />
  <script src="script_for_page_3" />
</head>
<body>
  <img src="image_from_page_one" style="opacity: 0" />
  <img src="image_from_page_one" style="opacity: 0" />
  <img src="image_from_page_one" style="opacity: 0" />
  <img src="image_from_page_two" style="opacity: 0" />
  <img src="image_from_page_two" style="opacity: 0" />
  <img src="image_from_page_two" style="opacity: 0" />
  <img src="image_from_page_two" style="opacity: 0" />
  <img src="image_from_page_three" style="opacity: 0" />
</body>
</html>

Load all images and scripts for full website at once?

Question

2 answers

solution1
2 ACCPTED 2017-02-11 06:14:52

Preface

Scripts

Images

Note

solution2
0 2017-02-11 05:19:13

Load all images and scripts for full website at once?

Question

2 answers

solution1 2 ACCPTED 2017-02-11 06:14:52

Preface

Scripts

Images

Note

solution2 0 2017-02-11 05:19:13

solution1
2 ACCPTED 2017-02-11 06:14:52

solution2
0 2017-02-11 05:19:13