Can this be created in javascript. A timer?

JavaScript
124

That time div doesn’t come until later, but I guess that we can leave it there and squeeze things between it and the image for step 3.

125

What’s step 3?

126

Can you find it in the list of steps shown in post #100 ?

127

What happens then? After all of the timers and images have been done, you’ll want to show the results for the timer.
So, you the have:

128

a div to show the results of the timers

129 
  setTimeout(function() {

    performance.mark("myImage-end");
130

No, you’ve skipped a section. Here’s the information again. Can you find step 3?

When you have one image that you want to test, you want to start the timer before it, and end the timer after it. So your code will be:

script to start the timer for image 1
image 1
script to end the timer for image 1

What happens then? After the timers and image have been done, you’ll want to show the results for the timer.
So, you the have:

a div to show the results of the timers
a script that uses each of the timers to create the measurement from them
a script that uses the measurement and shows the result in the above results div
a script that cleans up the stored markers

131

script to end the timer for image 1

132 
<script>
 setTimeout(function() {
 
    performance.mark("myImage-end");
</script>
133

Good one. What’s next, the div to show the results of the timers. It looks like you already have that in place too.

134

Oh hang on, that setTimeout has no business being involved with any of your testing code.

135 
<script>
  myImage(function() {

        performance.mark("myImage-end");

</script>
136

That won’t work either. You only need the “script to end the timer for image 1” as is stated in the instructions.

137 
<script>

        performance.mark("myImage-end");
</script>
138

That’s right. That’s part of the script to end the timer, but you need to trigger it as the load event of the image.

You have a good example of how to do that in post #49

139 
<script>
  performance.mark("mySetTimeout-start");
</script>

<script>
        performance.mark("myImage-end");
</script>


<script>
  var image = document.getElementById('myTimer');
  image.addEventListener("load", listener, false);

  function listener() {
     console.timeEnd('Timer1');
  }
</script>

<script>
  performance.measure(
    "myImage",
    "myImage-start",
    "myImage-end"
  );
</script>
140

I know you’re impatient, but there’s too much to fix in what you pasted.

This needs to be done slowly, one step at a time.

141 
<script>
        performance.mark("myImage-end");
          function listener() {
     console.timeEnd('Timer1');
       
</script>
142

Native browser dev tools show you how long each asset takes to download. Why not just use that?

1 Like
143

With that script from post #49, you need to update the getElementById line so that it gains a reference to your image.