JavaScript盲点记录----(三)

文章目录

1. 1. 原生实现图片懒加载(摘自学习原生JS延时加载)
2. 2. 防抖和节流
3. 3. css实现: 图片居中,两边文字环绕布局

最近在练习JavaScript题目时发现有些实现自己立即并不能想出来，而且有些常见的方法的用法理解是有错误的如parseInt，所以记录一下。这是第三篇，定要温故而知新 。^_^

原生实现图片懒加载(摘自学习原生JS延时加载)

<img src="/loading.gif" data-src="http://xx/xx/dd.png">初始状态下让图片的默认src为空或者指向一个小尺寸图片，设置data-src属性存储图片真实路径。需要显示图片时用data-src属性值替换掉默认的src值.

 var imgs = document.body.querySelectorAll('img'),    //获取所有图片  
    H = window.innerHeight;     //浏览器高度
window.onload = window.onscroll = function () {
    var S = document.documentElement.scrollTop || document.body.scrollTop;   //滚动条滚过高度
    [].forEach.call(imgs, function (img) {
        if (!img.getAttribute('data-src')) { return }
        if (H + S + 200 > getTop(img)) {
            // getTop(img)获取图片距离页面顶部高度，H+S+200让图片提前加载。
            img.src = img.getAttribute("data-src");
            img.removeAttribute("data-src");
        }
    })
}

    function getTop(e) {     //获取元素距离顶部高度方法。  
        var T = e.offsetTop;
        while (e = e.offsetParent) {
            T += e.offsetTop
        }
        return T
    }

对于图片的src 初始设置值可以是用于显示加载的图片以用于提示。

防抖和节流

在问题1中用到了onscroll事件 ， 实际在onscroll 和 resize 时会设计到大量的位置计算、DOM操作、元素重绘等工作且这些工作无法再下一个scroll事件触发之前完成，就会造成浏览器掉帧，并且用户鼠标滚动往往是连续的，就是持续触发scroll事件导致掉帧扩大、浏览器cpu使用率增加。 对于这种情况可以使用防抖和节流进行优化。

防抖：在事件连续触发时，合并这些连续的事件并且等待一段时间（delay）在这段时间内没有事件触发时才会真正的触发事件。 实际表现为： 在连续操作的最后才会真正执行。

function debounce(handler,delay){
    var context ,args ,timer = null
    var later = function(handler){
        handler.apply(context,args)
        timer = null
    }
    return function(){
        context = this, args = arguments
        if(timer){
            clearTimeout(timer)
        }
        timer = setTimeout(later,delay) 
    }
}

节流：防抖是在频繁连续操作的最后才会触发真正的操作不管这个连续操作究竟有多长，节流是在持续事件触发时，保证在设定间隔时间触发一次真正的操作，节流就更适合于问题1中的情景。

function throttle(handler,delay){
    var context,args,previous = new Date()
    return function(){
        context = this
        args = arguments
        var now = new Date()
        var dur = now-previous-delay
        if(dur>=0){
            previous = now
            handler.apply(context,args)
        }
    }
}

requestAnimationFrame 也可以进行节流，但是时间间隔是固定的。requestAnimationFrame 被调用的频率是每秒60次，也就是1000/60，触发频率大概是16.7ms。（当执行复杂操作时，当发现无法维持60fps的速率时，会把频率降低到30fps保持帧数的稳定）

pointer-events: none 禁止鼠标事件如鼠标点击、hover等功能都将失效。pointer-events: none可以用来提高滚动的帧频。当滚动个时，鼠标悬停在某些元素上，则触发其上的hover效果，然而这些影响通常不被用户注意，并多半导致滚动出现问题。大概的做法是 在页面滚动之前，给body 添加此属性，在页面滚动之后，再移除此属性。

参考自debounce(防抖)和throttle(节流)

css实现: 图片居中,两边文字环绕布局

效果图为

实现思想： 实际是没有float:center属性的。但是又会是有文字环绕图片的效果出现，所以又会是用到浮动。所以将实现分成两部分，使用伪元素给中间图片留下空隙，然后使用绝对定位来定位图片的位置。
demo:

* {
      padding: 0;
      margin: 0;
  }
  .wrapper {
      position: relative;
      border: solid 1px springgreen;
      width: 500px;
      font-size: 0;
  }
  img{
      position:absolute;
      top:0;
      left: 200px;
      width:100px;
      height:100px;
  }
  .left::before {
      content: '';
      float: right;
      width: 50px;
      height: 100px
  }
  
  .left {
      display: inline-block;
      width: 250px;
      font-size: 16px;
  }
  
  .right {
      display: inline-block;
      width: 250px;
      font-size: 16px;
  }
  
  .right::before {
      content: "";
      float: left;
      width: 50px;
      height: 100px;
  }

<div class="wrapper">
    <img src="zhaoliying.jpg" alt="">
    <div class="left">今儿呀真高兴啊真啊真高兴今儿呀真高兴啊真啊真高兴今儿呀真高兴啊真啊真高兴今儿呀真高兴啊真啊真高兴今儿呀真高兴啊真啊真高兴今儿呀真高兴啊真啊真高兴今儿呀真高兴啊真啊真高兴今儿呀真高兴啊真啊真高兴今儿呀真高兴啊真啊真高兴今儿呀真高兴啊真啊真高兴</div>
    <div class="right">今儿呀真高兴啊真啊真高兴今儿呀真高兴啊真啊真高兴今儿呀真高兴啊真啊真高兴今儿呀真高兴啊真啊真高兴今儿呀真高兴啊真啊真高兴今儿呀真高兴啊真啊真高兴今儿呀真高兴啊真啊真高兴今儿呀真高兴啊真啊真高兴今儿呀真高兴啊真啊真高兴今儿呀真高兴啊真啊真高兴</div>
</div>