懒加载

图片懒加载

实现原理

原理：先将img标签中的src链接设为同一张图片（空白图片），将其真正的图片地址存储再img标签的自定义属性中（比如data-src）。当js监听到该图片元素进入可视窗口时，即将自定义属性中的地址存储到src属性中，达到懒加载的效果。

这样做能防止页面一次性向服务器响应大量请求导致服务器响应慢，页面卡顿或崩溃等问题。

    $(window).on('scroll', function(){
      start()
    })

    function start(){
      $('.container img').not('[data-isLoaded]').each(function(){
        var $node = $(this)
        if( isShow($node) ){
          loadImg($node)
        }
      })
    }


    function isShow($node){
      return $node.offset().top <= $(window).height() + $(window).scrollTop() //  总的元素高度低于已经滚动的高度 加上窗口高度
    }

    function loadImg($img){
      $img.attr('src', $img.attr('data-src'))
      $img.attr('data-isLoaded', 1)   // 已经显示的加上一个属性
    }