layui-1.x实现图片懒加载(按屏加载)

前端  /  管理员 发布于 7年前   1469

 首先引入layui前端框架（步骤去看官网）
 html:
    <div class="product-list">
         <?php foreach ($xx as $v) { ?>
               <span class="pro-img">
                   <img lay-src="/{$v.thumb_img}" alt="{$v.goods_name}">
               </span>
         <?php } ?>
    </div>
  jq:
  <script>
        layui.use('flow', function(){
          var $ = layui.jquery;
          var flow = layui.flow;
         
          //按屏加载图片
          flow.lazyimg({
            elem: '.product-list img'
          });
          
        });
  </script>

效果图：(官网原话：Layui的图片懒加载，除了对滚动条的性能进行了美好的优化，也对图片的“当前屏”进行了高效计算，无惧于任何规模庞大的图片数量！)