Understand preloading and lazy loading, and learn slow animation

Preloading : There will be many links when loading the page 、 Pictures, etc , Load resources ahead of time -- Optimization of homologous loading .

Lazy loading :  Resources are not loaded first Wait until the conditions are satisfied , If our web page slips to a certain position, it will start loading .

Now just know it first .

Slow motion animation

Changing the style of elements at a constant speed is uniform animation ; Changing the style of elements at a non-uniform speed is slow animation .

It's very simple to realize slow motion animation , Just remember a formula ：

The set value = Current value +（ The target - Current value ）* percentage

Use with timer , Add less and less each time , Realize jogging .

Small example ：

Slide in slowly at the bottom

<style>
        .box{
           margin: 100px auto;
           width: 300px;
           position: relative;
           height: 450px;
           overflow: hidden;
           

       }
       img{
           width: 300px;

       }
       .info{
           position: absolute;
           top: 450px;
           height:150px;
           width: 100%;
           background-color: rgba(255,255,255,0.8);
           display: flex;
           flex-direction: column;
           justify-content: space-around
       }
       .info div{
           height: 40px;
           color: gray;
           text-align: center;
       }
       .info div span{
           color: orange;
           margin-left:20px ;
       }
   </style>
    <div class="box">
        <img src="../img/ star 7.jpg" alt="">
        <div class="info">
                 <div> Gulinaza  <span> Annual salary ：***<span></div>
                <div> actor   Dancer   Boy killer </div>
                <div> induction *** Co., LTD. </div>
        </div>
    </div>
    <script>
        var info=document.querySelector(".info")
        var box=document.querySelector(".box")
        var timer1=null
        var timer2=null
        box.onmouseenter=function(){
            clearInterval(timer2)
            timer1 = setInterval(function(){
                var nowcsstop=parseInt(window.getComputedStyle(info).top)
            // console.log(nowcsstop);
            info.style.top=nowcsstop +(300-nowcsstop)*0.5+"px"
            
            },100)

        }
        box.onmouseleave=function(){
            clearInterval(timer1)
           timer2 = setInterval(function(){
                info.style.top=parseInt(info.style.top)+(450-parseInt(info.style.top))*0.5+"px"
            },100)
           
        }
    </script>