Showing the video without a cover


#42

All the javascript codes we’ve done, they were all inside functions.

Maybe not all codes belong inside functions.


#43

Functions let you define code that you want to run later. That is not the case here.


#44

I guess I would have the images at the top, and then the load function under that.

  if (document.images) {
    img1 = new Image();
    img1.src = "https://i.imgur.com/AJDZEOX.jpg";
    img2 = new Image();
    img2.src = "https://i.imgur.com/UzRn6Qx.png";
    img3 = new Image();
    img3.src = "https://i.imgur.com/96Q10GA.png";
    img4 = new Image();
    img4.src = "https://i.imgur.com/WzHsnG7.png";
    img5 = new Image();
    img5.src = "https://i.imgur.com/92kMrMf.jpg";
  }

const load = (function makeLoad() {
  "use strict";

  function _load(tag) {
    return function(url) {
      return new Promise(function(resolve) {
        const element = document.createElement(tag);
        const parent = "body";
        const attr = "src";
        element.onload = function() {
          resolve(url);
        };
        element[attr] = url;
        document[parent].appendChild(element);
      });
    };
  }
  return {
    js: _load("script")
  };
}());

#45

Now you see, if you had said that you want to do a performance comparison of different image loading techniques, that would make it much easier to provide useful help and assistance.

As things stand currently though it looks like you are instead just waffling around in the wind with no rhyme or reason to what you are messing around with.


#46

It’s working here:

This image code works well.
https://jsfiddle.net/g6oaht8f/199/

  if (document.images) {
    img1 = new Image();
    img1.src = "https://i.imgur.com/AJDZEOX.jpg";
    img2 = new Image();
    img2.src = "https://i.imgur.com/1TbGgqz.png";
    img3 = new Image();
    img3.src = "https://i.imgur.com/1TbGgqz.png";
    img4 = new Image();
    img4.src = "https://i.imgur.com/UzRn6Qx.png";
    img5 = new Image();
    img5.src = "https://i.imgur.com/96Q10GA.png";
    img6 = new Image();
    img6.src = "https://i.imgur.com/WzHsnG7.png";
    img7 = new Image();
    img7.src = "https://i.imgur.com/92kMrMf.jpg";
    img8 = new Image();
    img8.src = "https://i.imgur.com/fOfpsiC.png";
  }

  const load = (function makeLoad() {
    "use strict";

    function _load(tag) {
      return function(url) {
        return new Promise(function(resolve) {
          const element = document.createElement(tag);
          const parent = "body";
          const attr = "src";
          element.onload = function() {
            resolve(url);
          };
          element[attr] = url;
          document[parent].appendChild(element);
        });
      };
    }
    return {
      js: _load("script")
    };
  }());

#47

Would you keep this at the top of the html, or the javascript part??

<script>
  if (document.images) {
    img1 = new Image();
    img1.src = "https://i.imgur.com/AJDZEOX.jpg";
    img2 = new Image();
    img2.src = "https://i.imgur.com/1TbGgqz.png";
    img3 = new Image();
    img3.src = "https://i.imgur.com/1TbGgqz.png";
    img4 = new Image();
    img4.src = "https://i.imgur.com/UzRn6Qx.png";
    img5 = new Image();
    img5.src = "https://i.imgur.com/96Q10GA.png";
    img6 = new Image();
    img6.src = "https://i.imgur.com/WzHsnG7.png";
    img7 = new Image();
    img7.src = "https://i.imgur.com/92kMrMf.jpg";
    img8 = new Image();
    img8.src = "https://i.imgur.com/fOfpsiC.png";
  }

</script>

#48

I wouldn’t use that at all, as it’s a micro-optimization that serves no real benefit.


#49

It’s used to load all the images before the page is opened:
https://jsfiddle.net/g6oaht8f/199/


#50

Loading all the images beforehand, slows down the performance of the page.
If you’re wanting to make people wait longer before they can use the page, then you’re doing the right thing.

Do you have a performance problem on your page that needs to be solved by caching images? The answer is no.


#51

I guess you do have a point there.


#52

The average website loads about how many images on page load?

Would you say that 8 images is minuscule compared to others?

I could probably drop that down to 5, being only the images that are able to be viewed after its clicked to view the page.

Depending on how big people’s monitors are, I could go down to preloading 4 images.

I could probably go even lower to only 3.

Only the images that are seen first when viewing the page should be preloaded, not every single image.


#53

Usually preloading occurs for images that aren’t yet shown, that you want to appear instantly in response to user input.

On the other hand, your use-case of loading the webpage has no appreciable benefit at all from preloading.


#55

How would this be fixed?

Uncaught TypeError: Cannot read property ‘style’ of null
https://jsfiddle.net/g6oaht8f/206/

function preloader() {
  if (document.getElementById) {
    document.getElementById("preload-01").style.background = "url(https://i.imgur.com/AJDZEOX.jpg) no-repeat -9999px -9999px";
    document.getElementById("preload-02").style.background = "url(https://i.imgur.com/1TbGgqz.png) no-repeat -9999px -9999px";
    document.getElementById("preload-03").style.background = "url(https://i.imgur.com/1TbGgqz.png) no-repeat -9999px -9999px";
    document.getElementById("preload-04").style.background = "url(https://i.imgur.com/UzRn6Qx.png) no-repeat -9999px -9999px";
    document.getElementById("preload-05").style.background = "url(https://i.imgur.com/96Q10GA.png) no-repeat -9999px -9999px";
    document.getElementById("preload-06").style.background = "url(https://i.imgur.com/WzHsnG7.png) no-repeat -9999px -9999px";
    document.getElementById("preload-07").style.background = "url(https://i.imgur.com/92kMrMf.jpg) no-repeat -9999px -9999px";
    document.getElementById("preload-08").style.background = "url(https://i.imgur.com/fOfpsiC.png) no-repeat -9999px -9999px";
  }
}

function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = func;
  } else {
    window.onload = function() {
      if (oldonload) {
        oldonload();
      }
      func();
    }
  }
}
addLoadEvent(preloader);

#56

I changed it to getElementsByClassName
https://jsfiddle.net/g6oaht8f/208/

And got this:

Google Chrome

TypeError: Cannot set property ‘background’ of undefined
at preloader

I would change this line to what?
document.getElementsByClassName("preload-01").style.background = "url(https://i.imgur.com/AJDZEOX.jpg) no-repeat -9999px -9999px";

Is the answer on how to fix it in here?


#57

Class names are best used when you have multiple elements that you want to select with one class name.
Unique identifiers are best used when you have a single element that you want to select.

In this case, unique identifiers are be more appropriate than using many different class names.


#58

How would I fix this one then?

Uncaught TypeError: Cannot read property ‘style’ of null
https://jsfiddle.net/g6oaht8f/206/

document.getElementById("preload-01").style.background = "url(https://i.imgur.com/AJDZEOX.jpg) no-repeat -9999px -9999px";


#59

Ensure that it’s not null.


#60

It’s only coming up in chrome that error, now firefox.
https://jsfiddle.net/g6oaht8f/206/


#61

I don’t see the error anymore:
https://test2codes.blogspot.com/


#62

What are your thoughts on using this code?
https://jsfiddle.net/g6oaht8f/206/

Preloading with CSS and JavaScript
https://perishablepress.com/3-ways-preload-images-css-javascript-ajax/

There are many ways to preload images, including methods that rely on CSS, JavaScript, and various combinations thereof. As one of my favorite topics here at Perishable Press, I have covered image preloading numerous times:

Each of these techniques sort of builds on previous methods and remains quite effective and suitable for a variety of design scenarios. Thankfully, readers always seem to chime in on these posts with suggestions and improvements.

With that method, images are easily and effectively preloaded using the following CSS:

#preload-01 { background: url(http://domain.tld/image-01.png) no-repeat -9999px -9999px; }
#preload-02 { background: url(http://domain.tld/image-02.png) no-repeat -9999px -9999px; }
#preload-03 { background: url(http://domain.tld/image-03.png) no-repeat -9999px -9999px; }

By strategically applying preload IDs to existing (X)HTML elements, we can use CSS’ background property to preload select images off-screen in the background. Then, as long as the paths to these images remains the same when they are referred to elsewhere in the web page, the browser will use the preloaded/cached images when rendering the page. Simple, effective, and no JavaScript required.

As effective as this method is, however, there is room for improvement. As Ian points out, images that are preloaded using this method will be loaded along with the other page contents, thereby increasing overall loading time for the page. To resolve this issue, we can use a little bit of JavaScript to delay the preloading until after the page has finished loading. This is easily accomplished by applying the CSS background properties using Simon Willison’s addLoadEvent()

function preloader() {
	if (document.getElementById) {
		document.getElementById("preload-01").style.background = "url(http://domain.tld/image-01.png) no-repeat -9999px -9999px";
		document.getElementById("preload-02").style.background = "url(http://domain.tld/image-02.png) no-repeat -9999px -9999px";
		document.getElementById("preload-03").style.background = "url(http://domain.tld/image-03.png) no-repeat -9999px -9999px";
	}
}
function addLoadEvent(func) {
	var oldonload = window.onload;
	if (typeof window.onload != 'function') {
		window.onload = func;
	} else {
		window.onload = function() {
			if (oldonload) {
				oldonload();
			}
			func();
		}
	}
}
addLoadEvent(preloader);

In the first part of this script, we are setting up the actual preloading by targeting specific preload elements with background styles that call the various images. Thus, to use this method, you will need to replace the “preload-01”, “preload-02”, “preload-03”, etc., with the IDs that you will be targeting in your markup. Also, for each of the background properties, you will need to replace the “image-01.png”, “image-02.png”, “image-03.png”, etc., with the path and name of your image files. No other editing is required for this technique to work.

Then, in the second part of the script, we are using the addLoadEvent() function to delay execution of our preloader() function until after the page has loaded.

SO what happens when JavaScript is not available on the user’s browser? Quite simply, the images will not be preloaded and will load as normal when called in the web page. This is exactly the sort of unobtrusive, gracefully degrading JavaScript that we really like.