JavaScript Tutorial - 'load' event | Detect when images or the page has loaded

Показать описание

By using the "load" event within JavaScript, you are able to detect when the web page or images, scripts etc. have finished loading. From there, you can run a callback function to take action.

In this video we take a look at two examples of the "load "event, one for the entire page and one that deals with individual images. Enjoy.

Support me on Patreon:

For your reference, check this out:

Follow me on Twitter @dcode!

If this video helped you out and you'd like to see more, make sure to leave a like and subscribe to dcode!

Рекомендации по теме

Комментарии

You are rapidly becoming my go-to JS Sensei! You rock!

MichaelProstka

Can you show the same with a preloader? Like the preloader will keep running until the images gets loaded then the preloader should disappear and website should open!

xavierfoster

Is it possible to apply load addEventListener to multiple images at the same time and do something once all images have been loaded?

senju

hi, amazing but how make it work on videos?

-MrHow-

In my case, the message is displayed first, than the image.

sbmahapatra

how to use this when a close button loads, then auto click it?

hillaryeatsbabies

What if the images don't have id's but are in a div class and inside an asset name? like

<div class="blahblah"> <img asset-name="image.png" /></div> How could I do something after this image has loaded, like click it's close button?

hillaryeatsbabies

i wanna ask how to do loader using sass only?
because my project strictly use css and sass only but all video sample in youtube all using java

anamarie

how o detect loaded images from multiple images(like 100) using javascript

nishad

Thanks for the video! =) who downvoted? >:-|

GustavoMartinZalazarGonzalez

Keyboard is very loud. Distracting and annoying

MR-list

JavaScript Tutorial - 'load' event | Detect when images or the page has loaded

JavaScript Tutorial - 'load' event | Detect when images or the page has loaded

JavaScript Tutorial For Beginners #41 - Window onLoad Event

JavaScript Tutorial - 'DOMContentLoaded' event | When is it safe to interact with the DOM?

JavaScript DOM Tutorial #18 - DOMContentLoaded Event

JavaScript Tutorial in Hindi for Beginners [Part 58] - Page Load Events in JavaScript

What Is The Fastest Way To Load JavaScript

JavaScript Tutorial - 'unload' event | Detect when the browser window has closed

jQuery Tutorial for Beginners #17 - Document Ready vs Window Load

Onmouseover and Onmouseout Events in JavaScript

The 'scroll' event in JavaScript | window.onscroll

33: What Are JavaScript Events | JavaScript Events | JavaScript Tutorial | mmtuts

34: How To Prevent Default Events In JavaScript | JavaScript Events | JavaScript Tutorial | mmtuts

Real-time Data Updates with Fetch API - JavaScript Tutorial

Javascript OnSubmit Event Tutorial for Beginners | How to Handle Forms in Javascript

Event Listeners - Javascript - Tutorial 14

Onload and Onerror event in Javascript | Javascript Tutorial | by Rahul Chaudhary

Loading data into HTML Tables using AJAX - JavaScript Tutorial

Beginner JavaScript Tutorial - DOM Manipulation and API calls to Storyblok

JavaScript Tutorial For Beginners # 39 - Introduction to JavaScript Events

Track Fetch Request Download Progress + Progress Bar | JavaScript Tutorial

Event Listeners in JavaScript | JavaScript Events Tutorial

Learn Fetch API In 6 Minutes

JavaScript Tutorial: Events & Listening to Events | Web Development Tutorials #57

Events in JavaScript || JavaScript Tutorial for Beginners