jQuery lazyload.js 懒加载可视范围图片

简介: jQuery lazyload.js 懒加载可视范围图片

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    div {
      height: 3000px;
      background-color: pink;
    }
  </style>
  <script src="jquery-3.4.1.js"></script>
  <script src="lazyload.min.js"></script>
  <script>
    $(function () {
      // 懒加载调用
      $("img.lazyload").lazyload();
    })
  </script>
</head>
<body>
  <div></div>
  <!-- 如果不导入 lazyload.min.js,则会加载全部图片 -->
  <!-- <img src="temp.png" alt=""> -->
  <!-- 使用懒加载,则只会加载可视范围图片 -->
  <img class="lazyload" data-src="temp.png" width="765" height="574" />
</body>
</html>
  • demo 效果:


相关文章
|
2月前
|
JavaScript 前端开发 安全
使用 Node.js 插件给指定目录下的所有图片添加上文字水印
使用 Node.js 插件给指定目录下的所有图片添加上文字水印
59 0
|
3月前
|
移动开发 JavaScript 定位技术
分享118个JS图片代码,总有一款适合您
分享118个JS图片代码,总有一款适合您
22 0
|
3月前
|
移动开发 JavaScript 前端开发
分享126个JS图片代码,总有一款适合您
分享126个JS图片代码,总有一款适合您
35 0
|
3月前
|
移动开发 JavaScript HTML5
分享106个JS图片代码,总有一款适合您
分享106个JS图片代码,总有一款适合您
19 0
|
3月前
|
移动开发 JSON JavaScript
分享188个JS图片效果JS代码,总有一款适合你
分享188个JS图片效果JS代码,总有一款适合你
38 1
|
3月前
|
JavaScript
js实现图片3D轮播效果(收藏)
js实现图片3D轮播效果(收藏)
26 0
|
1月前
|
JavaScript 前端开发 API
js截取图片地址后面的参数和在路径中截取文件名或后缀名
在处理网页上的图片资源或者其他类型的文件资源时,你可能会遇到需要使用这些技巧的情况。以下是一些具体的使用场景:
20 0
|
16天前
|
JavaScript 前端开发
JQuery和JS的区别有哪些?
JQuery和JS的区别有哪些?
13 0
|
1月前
|
JavaScript
jQuery选择器案例之——index.js
jQuery选择器案例之——index.js
8 0
|
1月前
|
JavaScript
js判断图片是否加载完成
js判断图片是否加载完成
24 0