Laggy jQuery under window onload

Question

I have a simple page onload effect that slides an absoluted empty div from 100% to 0% using CSS3 transitioning

jQuery:

$(window).on('load', function() {
    $("#curtain").css('width', '0');
});

CSS:

#curtain {
position: absolute;
z-index: 10;
width: 100%;
height: 100%;
transition: 1s;
float: left;
}

However, upon testing, the animation is visibly laggy. It would stagger at a low framerate and speed up tons at the end because of it. I tried binding the curtain animation to a button, and it worked perfectly smoothly, leading me to the conclusion that window onload is the issue. Is there any way I can fix this?

Have you experimented with adding a slight delay to the start of the transition or easing attributes? — Joe B., Aug 02 '17 at 01:47
I have tried both of those. Adding a delay only stops the lag at about +1.5s and above (I would prefer not to use such a long delay), and easing attributes don't seem to help with the lag. — user7548189, Aug 02 '17 at 02:08
Have you tried keyframes and using `animation` instead? Also, [this answer](https://stackoverflow.com/questions/6805482/css3-transition-animation-on-load) has quite a few different options to read through. It doesn't address the laggy, but more starting animations on page load — Joe B., Aug 02 '17 at 02:18

score 0 · Answer 1 · answered Aug 02 '17 at 02:19

You could just remove class .notloaded on load event and craft some css like:

.curtain {transition:.2s}
.curtain.notloaded {transform: translate(-100%,0)}

Seems like it would be a similar effect. The problem is- I believe- that browser has to recalculate all child elements every frame the width is changing.

PS: Why float on absolutely positioned element? :)

score 0 · Answer 2 · answered Aug 02 '17 at 07:10

float:left on absolute positioned elements is useless. Has no effect
Using jQuery for something that could be done very easy with css animations is not good practice and might slow down your loading time

you can easily do this

#curtain {
  width: 200px;
  height: 200px;
  background: red;
  animation-name: widthAnim;
  animation-delay: 0.5s;
  animation-duration: 0.8s;
  animation-fill-mode: forwards;
  animation-timing-function: ease-out;
}

@keyframes widthAnim {
  0% {
    width: 200px
  }
  100% {
    width: 0;
  }
}

<div id="curtain">

</div>

If you don't need to use jQuery for other purposes, i suggest you don't load it at all and use javascript. Native inline styling is the fastest way to change styles to an element . see here > css width inline

So you can do something like this

window.onload = function() {
curtain = document.getElementById('curtain');
curtain.style.width = 0
};

#curtain {
  width: 200px;
  height: 200px;
  background: red;
  transition:1s;
}

<div id="curtain">

</div>

Laggy jQuery under window onload

2 Answers2