欢迎光临 - 我的站长站,本站所有资源仅供学习与参考,禁止用于商业用途或从事违法行为!

js教程

LazyLoad按需懒加载使用方法

js教程 我的站长站 2021-09-09 共108人阅读

LazyLoad介绍

LazyLoad按需懒加载使用方法
LazyLoad效果截图

LazyLoad是一款非常热门的图片缓加载JS插件,您能看到的大部分网站图片懒加载都是基于这款JS框架开发。

LazyLoad功能

LazyLoad懒加载框架可以使图片缓加载,滚动条没拖到的地方暂不加载图片,优先加载用户能看到的图片,等用户拖到了再次加载图片,减少页面首次加载带宽,加快网页访问速度。

LazyLoad使用方法

1、首先下载LazyLoad插件:https://github.com/tuupola/lazyload/archive/2.x.zip

2、修改需要缓加载的图片代码如以下格式,

<img class="lazyload" src="img/example-thumb.jpg" data-src="img/example.jpg" width="765" height="574">

src:用一张还没加载显示的图片,比如我的站长站用的一张LOGO图片

data-src:为真实图片路径

3、加载JS,一般还需要jquery框架

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>    
<script src="lazyload.min.js"></script>
<script>
lazyload();
</script>
标签 jquery方法
相关推荐
  • jquery方法
  • jquery获取第几个索引方法

    使用jquery时经常会遇到,选择器选择一组元素后,需要在这组元素中找到第几个元素。jquery中使用eq()方法找到第几个元素或第N个元素,jquery中eq()的使用如下:eq() 选择器选取带有指定 index 值的元素。index 值从 0 开始,所有第一个元素的 index 值是 0(不...

    js教程 23 1年前
  • jquery控制radio单选框勾选和取消勾选方法

    attr()方法勾选$("input[type=&#39;radio&#39;]").attr("checked",&#39;checked&#39;);取消勾选$("input[type=&#39;radio&#39;]").removeAttr(&#39;checked&#39;);prop()方法勾选$("input[type=&#39;radio&#...

    js教程 62 1年前
  • jquery返回网站顶部方法大全

    1、基础版,只带返回顶部功能<!doctype html><html><head> <meta charset="UTF-8"> <title>返回顶部</title> <script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script> <style type=&...

    js教程 30 1年前
  • LazyLoad按需懒加载使用方法

    LazyLoad介绍LazyLoad效果截图LazyLoad是一款非常热门的图片缓加载JS插件,您能看到的大部分网站图片懒加载都是基于这款JS框架开发。LazyLoad功能LazyLoad懒加载框架可以使图片缓加载,滚动条没拖到的地方暂不加载图片,优先加载用户能看到的图片,等用户拖...

    js教程 108 3年前
  • 本地储存window.localStorage使用方法

    window.localStorage

    js教程 94 4年前