Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by Michael Thomas
Michael Thomas
10,910 Points

Write this in jQuery...

How would you write this JavaScript function in jQuery?

window.addEventListener('load', function() {
    var video = document.querySelector('#video');
    var preloader = document.querySelector('.preloader');

    function checkLoad() {
        if (video.readyState === 4) {
            preloader.parentNode.removeChild(preloader);
        } else {
            setTimeout(checkLoad, 100);
        }
    }

    checkLoad();

    }, false);

1 Answer

LaVaughn Haynes
LaVaughn Haynes
12,397 Points

I have not worked with video so I don't know if this is the most efficient way to handle it, but just rewriting your code in jQuery would look like this. It works as well if you copy/paste it to a file and open in a browser.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Video</title>
</head>
<body>

    <div class="preloader">THIS WILL DISAPPEAR...</div>
    <video id="video" controls width="560">
        <source src="http://techslides.com/demos/sample-videos/small.webm" type="video/webm">
      <source src="http://techslides.com/demos/sample-videos/small.ogv" type="video/ogg">
      <source src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4">
      <source src="http://techslides.com/demos/sample-videos/small.3gp" type="video/3gp">
    </video>

    <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
    <script>
        $(document).ready(function(){
            var $video = $('#video');
            var $preloader = $('.preloader');

            function checkLoad(){
                if($video[0].readyState === 4){
                    $preloader.remove();
                }else{
                    setTimeout(checkLoad, 100);
                }
            }

            checkLoad();
        });
    </script>
</body>
</html>
LaVaughn Haynes
LaVaughn Haynes
12,397 Points

Also if you place your code at the bottom of the page then that document.ready wrapper is not necessary.

<script>
    var $video = $('#video'),
        $preloader = $('.preloader');

    function checkLoad(){
        if($video[0].readyState === 4){
            $preloader.remove();
        }else{
            setTimeout(checkLoad, 100);
        }
    }

    checkLoad();
</script>

And if you want to be able to use the same function for multiple videos you can use parameters instead of loading a specific file.

<script>
    var $video = $('#video')[0];
    var $preloader = $('.preloader');
    var $video = $('#video2')[0];
    var $preloader = $('.preloader2');

    //will work with multiple videos on the same page
    function checkLoad(mediaFile, loader){
        if(mediaFile.readyState === 4){
            loader.remove();
        }else{
            setTimeout(function(){
                checkLoad(mediaFile, loader);
            }, 100);
        }
    }

    checkLoad($video, $preloader);
    checkLoad($video2, $preloader2);
</script>
Michael Thomas
Michael Thomas
10,910 Points

LaVaughn! You are a champion!! Thankyou.

Michael Thomas
Michael Thomas
10,910 Points

Hey LaVaughn, I know you might be busy so no worries if you don't have time for this but, I tried your function with parameters but couldn't get it to work. I have two videos and two pre-loader divs, here's my function so far...

    var $video = $('#video');
    var $preloader = $('.throbber');

    function checkLoad(){
        if($video[0].readyState === 4){
            $preloader.addClass('loaded');
            $video.addClass('loaded');
        }else{
            setTimeout(checkLoad, 100);
        }
    }

    checkLoad();

My knowledge is limited so I am trying to solve it like this 

    var $video = $('#video');
    var $preloader = $('#throbber');
    var $video2 = $('#video2');
    var $preloader2 = $('#throbber2');

    function checkLoad(myVideo, myPreloader){
        if(myVideo.readyState === 4){
            myPrelaoder.addClass('loaded');
            myVideo.addClass('loaded');
        }else{
            setTimeout(checkLoad, 100);
        }
    }

    checkLoad(myVideo, myPreoader);
    checkLoad(myVideo2, myPreoader2);
LaVaughn Haynes
LaVaughn Haynes
12,397 Points

Use "[0]" on your video element queries. I should have explained that earlier.

I'm not an expert but this is my understanding: Your $(element) queries return an array-like jQuery object. Just think of it as an array to keep it simple.

$('.element') will return multiple elements.

$('#element') will only return 1 element as you are not supposed to have more than one element with the same ID anyway

Although using the ID selector only returns 1 element, it's still an array of 1 element so use $(element)[0] to extract that element out of the array.

This page might explain it better.

Below is an example of using log to see what you actually get in both instances. I hope that helps.

<script>
    var $video = $('#video');

    //logs>> [video#video, context: document, selector: "#video"]
    console.log($video);

    //logs>> <video id="video" controls width="500">...</video>
    console.log($video[0]);

</script>
Michael Thomas
Michael Thomas
10,910 Points

Ahh ok, I think I know what I did wrong now, thanks again LaVaughn!

LaVaughn Haynes
LaVaughn Haynes
12,397 Points

Cool. You only need to do that on your video element because that .readyState property is not jQuery. That's regular javaScript. On the other hand, .addClass() is jQuery so you don't have to do that for your preloader.