javascript的BOM操作及基本事件

BOM中的事件

• window.onload：等待文档和资源都加载完成之后再去执行

  页面中只能有一个，多个会覆盖

• window.onresize: 窗口重置事件

• window.onscroll: 滚动事件

// 1.window.onload：等待文档和资源都加载完成之后再去执行
window.onload = function(){
    // window.onload：等待文档和资源都加载完成之后再去执行
    // 页面中只能有一个，多个会覆盖
    var oCon = document.querySelector('#con');
    console.log(oCon);
    console.log(11111);

}
window.onload = function(){
    console.log(222222);
}

// 2.window.onresize: 窗口重置事件
window.onresize = function(){
    console.log("哈哈哈哈");
}

// 3.window.onscroll: 滚动事件
window.onscroll = function(){
    console.log('滚动');
}

body位置属性(三大系列)

• client系列

  • 元素的可视宽高：content+padding
    • 元素.clientWidth/Height
  • 屏幕的可视宽高：document.documentElement.clientWidth/Height

  var oDiv = document.querySelector('div');
  var cWidth = oDiv.clientWidth;
  var cHeight = oDiv.clientHeight;
  
  console.log(cWidth); // 200+50*2  300
  console.log(cHeight);// 100+50*2  200
  
  // 窗口尺寸重置
  window.onresize = function(){
      var w = document.documentElement.clientWidth;
      var h = document.documentElement.clientHeight;
      console.log(w, h);
  }
  

• offset系列

  • 元素的占位宽高：content+padding+border
    • 元素.offsetWidth/Height
  • 元素的位置
    • 元素到定位父元素的距离，没有定位父元素获取到body的距离
    • 元素.offsetLeft
    • 元素.offsetTop

• scroll系列

  • 页面被卷去的高度：
  • docuemnt.docuemntElement.scrollTop || docuemnt.body.scrollTop

  /* 
     scrollWidth/Height:获取元素实际的宽高
     scrollLeft/Top: 获取元素被卷去的宽高
  */
  // 1.获取元素实际的宽高
  var oDiv = document.querySelector('div');
  var scrollW = oDiv.scrollWidth;
  var scrollH = oDiv.scrollHeight;
  console.log(scrollW, scrollH); // 700 767
  
  // 2.添加滚动事件  onscroll
  oDiv.onscroll = function(){
      // var sLeft = oDiv.scrollLeft;
      // console.log(sLeft); // 被卷去的宽度
  
      var sTop = oDiv.scrollTop;
      console.log(sTop); // 被卷去的高度
  }
  
  // 3.页面添加滚动事件
  window.onscroll = function(){
      var scroll = document.documentElement.scrollTop || document.body.scrollTop;
      console.log(scroll);
  }
  

懒加载

先只加载可视窗口区域的图片，当用户向下拖动滚动条时再继续加载后面的图片（也是只加载目前可视窗口区域内的图片）。

1.这样减少了加载时的线程数量，使可视区域内的图片也能够快速加载，优化了用户体验。

2.减少了同一时间发向服务器的请求数，服务器压力剧减。

图片的路径不直接写在src属性中，把路径放在自定义属性_src中，图片不显示，图片如果在可视区范围内，获取自定义属性，设置给图片的src属性。滚动到哪，图片就显示到哪

var oImg = document.getElementsByTagName('img');
// 获取自定义属性_src 设置给图片的src属性
// oImg[0].src = oImg[0].getAttribute('_src');

var clientH = document.documentElement.clientHeight; // 屏幕的可视高度
// 1.加载首屏图片 循环判断图片是否在可视区范围内
for(var i = 0; i<oImg.length; i++){
    // 屏幕的可视高度 >= 图片到body顶部的距离    元素.offsetTop
    if( clientH >= oImg[i].offsetTop ){
        // 获取自定义属性 设置给图片的src属性
        oImg[i].src = oImg[i].getAttribute('_src');
    }
}

// 2.滚动到哪 显示到哪
window.onscroll = function(){
    var scroll = document.documentElement.scrollTop || document.body.scrollTop; 

    // 页面被卷走的高度 + 屏幕的可视高度 >= 图片到body顶部的距离
    for(var i = 0; i<oImg.length; i++){
        if(scroll + clientH >= oImg[i].offsetTop){
            // 显示
            oImg[i].src = oImg[i].getAttribute('_src');
        }
    }
}