jQuery滚动加载图片实现原理

一、 jQuery滚动加载图片的原理

jQuery滚动加载图片是一种前端优化方式，它的原理是在页面向下滚动的过程中异步加载图片，避免一次性加载过多的图片造成网页速度过慢的问题。其实现过程分为以下几个步骤：

绑定滚动事件：绑定滚动事件，当滚动条到达页面底部时触发特定函数。
判断滚动条高度：判断当前滚动条的高度是否超过了页面的高度，如果超过了，就表示已经到达页面底部。
异步加载图片：在滚动到页面底部时，使用Ajax异步加载图片。由于页面只会加载可视范围内的图片，因此可以大大减少页面图片加载量。
使用动画效果：为了增加用户体验度，可以使用动画效果，在图片加载完成后进行展示。

二、 jQuery滚动加载图片的实现方法

1.基础版

首先，我们需要先在页面中引入 jQuery 库，然后遍历所有带有 lazy 类的图片元素。代码如下：

$('img.lazy').each(function() {
  var self = $(this), 
      src = self.attr('data-original');
  self.attr('src', src);
});

接着，我们需要给文档注册滚动事件，在滚动到底部时加载你的图片。代码如下：

var page = 1;
$(window).scroll(function() {
  if ($(document).scrollTop() >= $(document).height() - $(window).height()) {
      page++;
      $.ajax({
        type: 'POST',
        url: '/ajax/lazyload/',
        data: {'page': page},
        dataType: 'html',
        success: function(data) {
          if (data.trim() !== '') {
            $('.mol-post-list').append(data);
            $('img.lazy').each(function() {
              var self = $(this), 
                  src = self.attr('data-original');
              self.attr('src', src);
            });
          }
        }
      });
  }
});

这里我们使用了 document 对象的 scrollTop() 方法来获取滚动的高度，然后使用 document 对象的 height() 方法获取页面高度，最后结合 $(window).height() 获取页面可见范围高度，用三者之和来判断页面是否已经滚动到底部。

进阶版

如果页面上的图片非常多，一次性全部加载，并不是很好，这个时候我们可以使用类似于分页的方式，即先加载一页的图片，当滚动条接近底部时，再加载下一页的图片，但是这种加载方式如果用户非常快速地滑动屏幕的话，就会先显示默认的无数据提示，让用户感觉不是很友好，这里我们可以增加一个 loading 效果，增强用户体验。

代码如下：

var page = 1,
    forEnd = true;
$(window).scroll(function() {
  if (forEnd) { // 加上流程控制，防止未加载完成又触发
      if ($(document).scrollTop() >= $(document).height() - $(window).height() - 50) {
      forEnd = false;
          page++;
          $('.loading').show(); // 显示loading效果
          $.ajax({
            type: 'POST',
            url: '/ajax/lazyload/',
            data: {'page': page},
            dataType: 'html',
            success: function(data) {
              if (data.trim() !== '') {
                $('.mol-post-list').append(data);
                $('img.lazy').each(function() {
                  var self = $(this), 
                      src = self.attr('data-original');
                  self.attr('src', src);
                });
                // 隐藏loading效果，页面元素解锁，可以再次滚动加载
                $('.loading').hide();
                forEnd = true;
              }
            }
          });
      }
  }
});

在这个案例中，我们可以看到，在滚动到底部时，页面将会显示 loading 效果，当实际异步加载完数据后，才会展示所有的图片和内容，同时隐藏 loading 效果。

三、样例

基础版

在页面上存在图片列表的情况下，HTML 代码如下

<ul class="img-list">  
  <li><img src="loading.gif" data-original="1.jpg" class="lazy"/></li>  
  <li><img src="loading.gif" data-original="2.jpg" class="lazy"/></li>  
  <li><img src="loading.gif" data-original="3.jpg" class="lazy"/></li>  
  <li><img src="loading.gif" data-original="4.jpg" class="lazy"/></li>  
  <li><img src="loading.gif" data-original="5.jpg" class="lazy"/></li>  
</ul>

然后在页面底部添加一个 loading.png 图片，用来做异步加载数据的 loading 效果。

<div class="loading">
  <img src="loading.png">
  <span>数据加载中，请稍后...</span>
</div>

为了减少代码冗余，我们可以将 lazyload.js 复制到自己项目中，修改其中的请求 URL 等参数，绑定懒加载事件：

$('img.lazy').lazyload({
   effect : "fadeIn"
});

var page = 1;
$(window).scroll(function() {
    if ($(document).scrollTop() >= $(document).height() - $(window).height()) {
        page++;
        $.ajax({
            type: 'POST',
            url: '/ajax/lazyload/',
            data: {'page': page},
            dataType: 'html',
            success: function(data) {
                if (data.trim() !== '') { $('.img-list').append(data);
                    $('img.lazy').lazyload({
                        effect : "fadeIn"
                    });
                }
            }
        });
    }
});

上述代码当页面滚动到底部时，就会异步加载数据，加载时间取决于服务器响应速度以及数据量大小。如果数据加载成功，就添加到当前页面中。

进阶版

上文中实现了基础懒加载功能的代码，如果想让懒加载更能体现其优势，可以利用封装好的 jQuery 插件 infinite-scroll，它可以实现滚动到底部时自动加载下一页内容的功能。

首先，我们需要引入 infinite-scroll.js 文件：

<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.lazyload.min.js"></script>
<script type="text/javascript" src="infinite-scroll.pkgd.min.js"></script>

然后，我们需要在页面中创建数据源。这里使用了 faker.js 插件，随机生成一些文章数据。

<div id="post-container">
  <!-- 此处留作后续数据注入 -->
</div>

<!-- 具有 loading 效果的容器 -->
<div id="loading-container">
  <p>正在加载中...</p>
</div>

接着，我们需要在 JavaScript 中编写代码实现。

var baseUrl = "https://fakerapi.it/api/v1/posts?page="; // 数据源地址
var $postContainer = $("#post-container"); // 设定容器（可能是 ul、div 等）
var $loadingContainer = $("#loading-container"); // 设定 loading 效果的容器
var pageIndex = 1; // 页码
function loadData() {
  var requestUrl = baseUrl + pageIndex; // 拼接数据源地址
  $.get(requestUrl).done(function(response) {
    var data = response.data; // 直接获取 arrays 结构中的数据
    var list = "";
    if (data.length > 0) {
      for (var i = 0; i < data.length; i++) {
        var postData = data[i];
        list += '<div class="post-item">';
        list += '<h2>' + postData.title + '</h2>';
        list += '<div class="post-info">' + postData.created_at + '<span>' + postData.category.name + '</span>' + '</div>';
        list += '<p>' + postData.content + '</p>';
        list += '</div>';
      }
      $postContainer.append(list);
      $loadingContainer.hide(); // 当异步请求成功之后，将 loading 效果隐藏掉
      $postContainer.find("img").lazyload(); // 延迟加载
    }
    pageIndex++;
  });
}
$(function() {
  // 初始化时立即加载第一屏的内容
  loadData();
  // infinite-scroll.js 进行初始化配置
  $postContainer.infiniteScroll({
    path: function() {
      // 根据 pageIndex 自动添加 URL
      return baseUrl + pageIndex;
    },
    append: "#post-container", // 指定数据追加的位置
    history: false,
    button: ".view-more-button", // 自动加载更多的按钮
    loadOnScroll: false,
    status: ".pagination",
    scrollThreshold: 100, // 滚动到底部的距离
    debug: false, 
    prefill: true,
    responseCache: true,
  });
  // 定制下拉刷新
  $postContainer.on("request.infiniteScroll", function(event, path) {
    $loadingContainer.show(); // 加载时显示 loading 效果
  });
});

通过引入 infinite-scroll.js 文件并进行初始化，就可以轻易地实现将数据源以滚动底部的方式自动添加的功能了。此外，可以看到还为外层容器绑定了 request.infiniteScroll 事件，用于实现自定义的 loading 效果。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：jQuery滚动加载图片实现原理 - Python技术站