图片懒加载使用方法及感受

最新推荐文章于 2023-06-01 15:40:01 发布

代码无边，回头是岸

最新推荐文章于 2023-06-01 15:40:01 发布

阅读量467

点赞数

文章标签：懒加载 JavaScript

本文链接：https://blog.csdn.net/qq_41810005/article/details/83313827

版权

废话不多说直接进入正题

有一款jquery的lazyload插件便是一个可以实现图片延迟加载的插件

插件的使用方法很简单（依赖jquery）：引入lazyload.js（压缩版才4KB）
对我们想要延迟加载的图片添加lazy样式，用”data-original” 替换图片的引用路径

一、引入jquery.js和lazyload.js插件，代码如下：

<!-- 引入jQuery.js -->
  <script src="./jquery_lazyload/jquery-1.11.0.min.js"></script>
<!-- 引入lazyload.js插件 -->
  <script src="./jquery_lazyload/jquery.lazyload.js"></script>

二、在js中引入相应的插件，代码如下：

 <script>
    $(function() {
      $().ready(function(){
        //可任意选择你想延迟加载的目标元素，例如直接使用样式名lazy作为选择条件
            $("img .lazy").lazyload({
             placeholder : "img/grey.gif", //占位图，加载出来之前的图片
             effect: "fadeIn", // 加载效果
             threshold: 200, // 提前加载
             event: 'click',  // trigger
             container: $("#container"),  //指定容器
             failurelimit : 5 // 发生混乱时的hack手段
          })
      })
   })
 <script>

三、详细参数的具体说明如下：

参数	作用	说明
placeholder	占位图片	图片路径值,图片加载时占位图自动隐藏
effect	图片载入时动画效果	值有show(直接显示),fadeIn(淡入),slideDown(滑入)等jq常用效果
threshold	提前开始加载高度	数字值,是离需要加载目标的高度.如设置为200,表示滚动条在离目标位置还有200的高度时就开始加载图片,避免用户看到图片加载过程
event	图片加载trigger	值有click(点击),mouseover(鼠标划过),sporty(运动的),foobar(…)
container	指定容器	lazyload默认在滚动浏览器滚动条时生效,这个参数可以让你在滚动某DIV的滚动条时执行懒加载
failurelimit	提高稳定性	若是某一张该被加载的图片未能正确加载，则加载其后的第N张图

四、帮组小白便于理解，完整代码奉上：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <img class="lazy" data-original="图片地址" width="500" height="500">
  <img class="lazy" data-original="图片地址" width="500" height="500">
  <img class="lazy" data-original="图片地址" width="500" height="500">
  <img class="lazy" data-original="图片地址" width="500" height="500">
  <img class="lazy" data-original="图片地址" width="500" height="500">
  <img class="lazy" data-original="图片地址" width="500" height="500">
  <img class="lazy" data-original="图片地址" width="500" height="500">
     <!-- 引入jQuery.js -->
  <script src="./jquery_lazyload/jquery-1.11.0.min.js"></script>
     <!-- 引入lazyload.js插件 -->
  <script src="./jquery_lazyload/jquery.lazyload.js"></script>
  <script>
    $(function() {
        $("img.lazy").lazyload({
          placeholder:"占位图片地址",
          effect: "fadeIn",/*进入效果*/
        });
    });
  </script>
</body>
</html>

完毕，在下告辞！不用留我吃饭！！！

代码无边，回头是岸

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
图片懒加载使用方法及感受

废话不多说直接进入正题有一款jquery的lazyload插件便是一个可以实现图片延迟加载的插件插件的使用方法很简单（依赖jquery）：引入lazyload.js（压缩版才4KB）对我们想要延迟加载的图片添加lazy样式，用”data-original” 替换图片的引用路径一、引入jquery.js和lazyload.js插件，代码如下：&lt;!-- 引入jQuery.j...
复制链接

扫一扫