Showing the video without a cover


#63

You seem to be insistent on preloading when it’s not good for you.

What do your measurement numbers have to say, when comparing with and without preloading on your page?


#64

Using the above code, images aren’t preloaded on page load, correct?
https://test2codes.blogspot.com/

https://jsfiddle.net/g6oaht8f/206/

Do you see any images cached inside inspect on page load?

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.


#65

Nope.


#66

So, then this would be a good code to use then, right?


#67

There doesn’t seem to be any point in using preload code for images, when images aren’t getting preloaded.

What benefit is that preload code supposed to give to the page?


#68

It doesn’t seem to be working now.

You’re right.


#69

I know this one works, but how would it be converted to forEach?
https://jsfiddle.net/g6oaht8f/221/

(function makeImageLoad() {
    const images = [];
    const preload = [ "https://i.imgur.com/AJDZEOX.jpg", "https://i.imgur.com/1TbGgqz.png", 
"https://i.imgur.com/UzRn6Qx.png",  "https://i.imgur.com/96Q10GA.png","https://i.imgur.com/WzHsnG7.png",
"https://i.imgur.com/92kMrMf.jpg","https://i.imgur.com/fOfpsiC.png" ];
    for (let i = 0; i < preload.length; i++) {
        images[i] = new Image();
        images[i].src = preload[i];
    }
})();

#70

It’s long past time that you learned how to use forEach loops. Here’s some details about them.


#71

Here’s a reliable way to convert for loops into forEach loops.

This is the code that we’re starting with:

Use a constant for the preload index lookup.

for (let i = 0; i < preload.length; i++) {
    const url = preload[i];
    images[i] = new Image();
    images[i].src = preload[i];
}

Replace the other preload lookups with that constant.

for (let i = 0; i < preload.length; i++) {
    const url = preload[i];
    images[i] = new Image();
    // images[i].src = preload[i];
    images[i].src = url;
}

You can now use a forEach statement instead:

// for (let i = 0; i < preload.length; i++) {
//     const src = preload[i];
preload.forEach(function (src, i) {
    images[i] = new Image();
    images[i].src = url;
// }
});

And last but certainly by no means least, give the function a meaningful name:

// preload.forEach(function (url) {
preload.forEach(function loadImage(url, i) {
    images[i] = new Image();
    images[i].src = url;
});

Presto chango, you now have forEach code instead.


#72

But that’s not all. The improvements don’t stop there.

What the code is doing is it’s taking something from one array, and assigning the same location of another array to be something else. The map method is used for that, which can be used here too.

const preload = [ ... ];
const images = [];
preload.forEach(function loadImage(url, i) {
    images[i] = new Image();
    images[i].src = url;
});

Instead of the forEach, we can use map instead. We can prepare for that by assigning the updated information from the end of the function:

preload.forEach(function loadImage(url, i) {
    // images[i] = new Image();
    const image = new Image();
    // images[i].src = url;
    image.src = url;
    images[i] = image;
});

A map gives us a new array that contains the new items, which can then be easily assigned to images.

const preload = [ ... ];
// const images = [];
// preload.map(function loadImage(url, i) {
const images = preload.map(function loadImage(url, i) {
    const image = new Image();
    image.src = url;
    // images[i] = image;
    return image;
});

And look, we don’t need the i variable anymore now either:

const preload = [ ... ];
// const images = preload.map(function loadImage(url, i) {
const images = preload.map(function loadImage(url) {
    const image = new Image();
    image.src = url;
    return image;
});

We can even move the new image stuff into its own separate function:

function createImage(url) {
    const image = new Image();
    image.src = url;
    return image;
}
const images = preload.map(function loadImage(url) {
    // const image = new Image();
    // image.src = url;
    // return image;
    return createImage(url);
});

And we can now just use that createImage function with the map instead:

// const images = preload.map(function loadImage(url) {
//     return createImage(url);
// });
const images = preload.map(createImage);

And presto-chango - the simplicity of that one line astouds even myself.


#73

Images has already been declared it says:
https://jsfiddle.net/g6oaht8f/223/

function createImage(url) {
    const image = new Image();
    image.src = url;
    return image;
}
const images = preload.map(function loadImage(url) {
    return createImage(url);
});

const images = preload.map(createImage);

Adding more than one image would look like this?

function createImage(url) {
const img1 = new Image();
img1.src = 'https://i.imgur.com/AJDZEOX.jpg';
const img2 = new Image();
img2.src = 'https://i.imgur.com/1TbGgqz.png';
    return image;
}
const images = preload.map(function loadImage(url) {
    return createImage(url);
});

const images = preload.map(createImage);

#74

It seems that you failed to remove the code that was being replaced, as was shown in the following code snippet:

// const images = preload.map(function loadImage(url) {
//     return createImage(url);
// });
const images = preload.map(createImage);

Nothing like it. Instead you would only add another url to the preload array list.


#75

What exactly do you mean by that?

Like this?

What am I doing wrong?

I’m confused:

function createImage(url) {
    const image = new Image();
    image.src = 'https://i.imgur.com/AJDZEOX.jpg',
    'https://i.imgur.com/AJDZEOX.jpg',
     'https://i.imgur.com/AJDZEOX.jpg' ;
    return image;
}

const images = preload.map(createImage);

Is this getting deleted?

function createImage(url) {
    const image = new Image();
    image.src = url;
    return image;
}

#76

Where is the preload array that you started with? Why have you deleted that?


#77

Like this?
https://jsfiddle.net/g6oaht8f/251/

(function makeImageLoad() {
    const preload = ["https://i.imgur.com/AJDZEOX.jpg", "https://i.imgur.com/1TbGgqz.png",
      "https://i.imgur.com/UzRn6Qx.png", "https://i.imgur.com/96Q10GA.png", "https://i.imgur.com/WzHsnG7.png",
      "https://i.imgur.com/92kMrMf.jpg", "https://i.imgur.com/fOfpsiC.png"
    ];

    function createImage(url) {
      const image = new Image();
      image.src = url;
      return image;
    }

    const image = preload.map(createImage);
})();

#78

Why did you change images to image?

The map iterates over each of those preload values, giving an array of images.
Calling it just image, ends up confusing anyone reading that code, when it should be images instead.


#79

https://jsfiddle.net/g6oaht8f/252/

(function makeImageLoad() {
    const preload = ["https://i.imgur.com/AJDZEOX.jpg", "https://i.imgur.com/1TbGgqz.png",
      "https://i.imgur.com/UzRn6Qx.png", "https://i.imgur.com/96Q10GA.png", "https://i.imgur.com/WzHsnG7.png",
      "https://i.imgur.com/92kMrMf.jpg", "https://i.imgur.com/fOfpsiC.png"
    ];

    function createImage(url) {
      const image = new Image();
      image.src = url;
      return image;
    }

    const images = preload.map(createImage);
})();

#80

The CSS method seems to work the best for preloading images.

All the CSS times are faster.

For the page to finish loading:

Only on first load, not 2nd, 3rd, 4th load.
Before the browser has ever cached the page.

250 ms no preload

734 ms
985 ms preload enabled

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

659 ms
656 ms preload enabled

body:after {
  content: "";
  position: absolute;
  left: -9999px;
  top: -9999px;
  z-index: -1;
  background: url(https://i.imgur.com/fOfpsiC.png) no-repeat 0 0, url(https://i.imgur.com/92kMrMf.jpg) no-repeat 0 0, url(https://i.imgur.com/WzHsnG7.png) no-repeat 0 0, url(https://i.imgur.com/96Q10GA.png) no-repeat 0 0, url(https://i.imgur.com/UzRn6Qx.png) no-repeat 0 0, url(https://i.imgur.com/1TbGgqz.png) no-repeat 0 0, url(https://i.imgur.com/AJDZEOX.jpg) no-repeat 0 0;
}

837 ms
747 ms preload enabled

(function loadImage() {
    const preload = [
        "https://i.imgur.com/AJDZEOX.jpg",
        "https://i.imgur.com/1TbGgqz.png",
        "https://i.imgur.com/UzRn6Qx.png",
        "https://i.imgur.com/96Q10GA.png",
        "https://i.imgur.com/WzHsnG7.png",
        "https://i.imgur.com/92kMrMf.jpg",
        "https://i.imgur.com/fOfpsiC.png"
    ];
    function createImage(url) {
      const image = new Image();
      image.src = url;
      return image;
    }

    const images = preload.map(createImage);
})();

#81

How many seconds in total have you devoted to investigating this problem?

Now, calculate that total number of seconds, divided by the amount of milliseconds saved in loading your page.


#82

Isn’t css always faster than javascript?