如何实现图片懒加载？

$('img').each(function () {//在未触发滚动事件时先判断图片是否已经出现在视窗中，打开页面时先遍历一次

if (checkShow($(this)) && !isLoaded($(this)) ){ loadImg($(this));//加载当前img  } })

$(window).on('scroll',function () {//滚动的触发事件

        $('img').each(function () {//遍历img标签

            if (checkShow($(this)) && !isLoaded($(this)) ){

                loadImg($(this));//加载当前img

            }

        })

    })

function checkShow($img) {}；// 定义checkShow函数判断当前img是否已经出现在了视野中，传入img对象

function isLoaded ($img) {}；//定义isLoaded函数判断当前img是否已经被加载过了

function loadImg ($img) {}；//定义loadImg函数加载图片

function checkShow($img) { // 传入img对象

        var sTop = $(window).scrollTop();  //即页面向上滚动的距离

        var wHeight = $(window).height(); // 浏览器自身的高度

        var offsetTop = $img.offset().top;  //目标标签img相对于document顶部的位置

        if (offsetTop < (scrollTop + windowHeight) && offsetTop > scrollTop) { //在2个临界状态之间的就为出现在视野中的

            return true;

        }

        return false;

    }

function isLoaded ($img) {

       return $img.attr('data-imgurl') === $img.attr('src'); //如果data-imgurl和src相等那么就是已经加载过了

   }

function loadImg ($img) {

      $img.attr('src',$img.attr('data-imgurl')); // 把自定义属性中存放的真实的src地址赋给src属性

  }