Web图片惰性加载

JavaScript
Uiaoin 2019-07-02 4403

惰性加载，即在用户需要使用图片的时候加载，这样可以减少请求，节省带宽，提高页面加载速度，同时也能减少服务器压力。

前段时间发现简书上有位大神写的比较好（没有收藏文章，后面找着补上），直接上代码！

JS：

  1. lazyRender();
  2. $(window).on('scroll',function () {
  3.     lazyRender();
  4. })
  5. function lazyRender () {
  6.     $('.blog-logo').each(function () {
  7.         if (checkShow($(this)) && !isLoaded($(this)) ){
  8.             loadImg($(this));
  9.         }
  10.     })
  11. }
  13. function checkShow($img) { // 传入一个img的jq对象
  14.     var scrollTop = $(window).scrollTop();  //即页面向上滚动的距离
  15.     var windowHeight = $(window).height(); // 浏览器自身的高度
  16.     var offsetTop = $img.offset().top;  //目标标签img相对于document顶部的位置
  18.     if (offsetTop < (scrollTop + windowHeight) && offsetTop > scrollTop) { //在2个临界状态之间的就为出现在视野中的
  19.         return true;
  20.     }
  21.     return false;
  22. }
  24. function isLoaded ($img) {
  25.     return $img.attr('data-src') === $img.attr('src'); //如果data-src和src相等那么就是已经加载过了
  26. }
  28. function loadImg ($img) {
  29.     $img.attr('src',$img.attr('data-src')); // 加载就是把自定义属性中存放的真实的src地址赋给src属性
  30. }


HTML：

  1. <img src="img/loading.gif" data-src="img-real-url.png" class="blog-logo" />