一个适合做页面“加载中”效果的插件jquery-loading

共7个文件

css：5个

js：1个

html：1个

需积分: 34 111 浏览量 2018-10-26 15:19:27 上传评论收藏 18KB ZIP 举报

在网页开发中，用户体验是至关重要的，特别是在页面数据加载期间，一个良好的“加载中”效果可以提高用户对网站的满意度。"jquery-loading"是一个专为实现这种效果设计的jQuery插件，它提供了一种简单而实用的方式来显示页面加载的状态，避免用户在等待过程中感到不耐烦。我们来了解一下jQuery。jQuery是一个快速、简洁的JavaScript库，它简化了HTML文档遍历、事件处理、动画以及Ajax交互。它的API设计使得JavaScript编程变得更加简单，特别适合初学者和高级开发者使用。jQuery库已经被广泛应用于各种类型的网页应用中，包括那些需要动态加载内容的页面。 "jquery-loading"插件则是在jQuery基础上构建的，它的主要功能是在页面内容加载时展示一个视觉提示，告诉用户页面正在处理请求。这个提示通常是一个旋转的菊花图案或者其他的动画效果，既美观又实用，能够有效地告知用户页面并未卡死，而是正在进行后台操作。该插件的使用方法非常简单。你需要在你的HTML文件中引入jQuery库和"jquery-loading"插件的JavaScript文件。然后，通过调用特定的jQuery函数，即可开启或关闭加载效果。例如，你可以这样使用： ```html <!DOCTYPE html> <html> <head> <script src="https://code.jquery.com/jquery.min.js"></script> <script src="jquery-loading.js"></script> </head> <body> <button id="load-btn">加载内容</button> <script> $('#load-btn').click(function() { $.loading.start(); // 开始加载效果 // 在这里进行你的Ajax请求或者其他需要加载的内容 setTimeout(function() { // 模拟延迟加载 $.loading.stop(); // 停止加载效果 }, 2000); }); </script> </body> </html> ``` 在上面的代码中，当用户点击按钮后，加载效果开始，然后执行一些数据加载操作（这里用`setTimeout`模拟）。一旦加载完成，通过调用`$.loading.stop()`，加载效果就会消失。 "jquery-loading"插件通常会提供多种样式供选择，开发者可以根据自己的需求定制加载动画的外观，如颜色、大小、速度等。同时，插件可能还支持自定义触发加载效果的事件，比如在Ajax请求开始和结束时自动启动和停止加载效果。总结来说，"jquery-loading"是一个强大的工具，它可以轻松地在网页中添加“加载中”效果，提升用户体验。结合jQuery的强大功能，它使得开发者能够更加专注于内容的创建，而不必担心如何实现复杂的加载动画。无论你是新手还是经验丰富的开发者，这个插件都值得你在项目中尝试和应用。

资源推荐

资源详情

资源评论

收起资源包目录

loading.zip （7个子文件）

index.html 6KB

loading.js 6KB

css

animate.css 56KB

print.css 216B

global.css 38KB

ie.css 276B

loading.css 17KB

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>loading测试效果</title> <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no"/> <link rel="stylesheet" href="css/animate.css"> <link rel="stylesheet" href="css/global.css"> <link rel="stylesheet" href="css/loading.css"> </head> <style> body,html{ height: 100%; display: flex; justify-content: center; align-items: center; } .div-btn{ width: 100%; max-width: 560px; /*margin:200px auto; */ } .div-btn div{ margin: 10px 0 ; } .test-div{ width: 300px; height: 300px; margin:20px auto; border: 1px solid #aaa; position: relative; } </style> <body> <div class="div-btn"> <div class="dw-btn btn-success" onclick="loading1()">默认效果</div> <div class="dw-btn btn-warning" onclick="loading8()">纵向文字颜色</div> <div class="dw-btn btn-primary" onclick="loading2()">纵向效果无title</div> <div class="dw-btn btn-danger" onclick="loading3()">纵向效果无title描述</div> <div class="dw-btn btn-warning " onclick="loading4()">其他背景色</div> <div class="dw-btn btn-success" onclick="loading5()">纵向图片效果</div> <div class="dw-btn btn-primary" onclick="loading6()">横向图片效果</div> <div class="dw-btn btn-danger" onclick="loading7()">横向进度效果,字体颜色</div> <div class="dw-btn btn-warning" onclick="loading10()">无过渡效果</div> </div> </body> <script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script> <script src="js/loading.js"></script> <script> function loading1() { $('body').loading({ loadingWidth:240, title:'请稍等!', name:'test', discription:'描述描述描述描述', direction:'column', type:'origin', // originBg:'#71EA71', originDivWidth:40, originDivHeight:40, originWidth:6, originHeight:6, smallLoading:false, loadingMaskBg:'rgba(0,0,0,0.2)' }); setTimeout(function(){ removeLoading('test'); },3000); } function loading2() { $('body').loading({ loadingWidth:240, title:'', name:'test', discription:'描述描述描述描述', direction:'column', type:'origin', // originBg:'#71EA71', originDivWidth:40, originDivHeight:40, originWidth:6, originHeight:6, smallLoading:false, loadingMaskBg:'rgba(0,0,0,0.2)' }); setTimeout(function(){ removeLoading('test'); },3000); } function loading3() { $('body').loading({ loadingWidth:120, title:'', name:'test', discription:'', direction:'column', type:'origin', // originBg:'#71EA71', originDivWidth:40, originDivHeight:40, originWidth:6, originHeight:6, smallLoading:false, loadingMaskBg:'rgba(0,0,0,0.2)' }); setTimeout(function(){ removeLoading('test'); },3000); } function loading4() { $('body').loading({ loadingWidth:240, title:'请稍等!', name:'test', discription:'这是一个描述...', direction:'column', type:'origin', originBg:'#71EA71', originDivWidth:40, originDivHeight:40, originWidth:6, originHeight:6, smallLoading:false, loadingBg:'#389A81', loadingMaskBg:'rgba(123,122,222,0.2)' }); setTimeout(function(){ removeLoading('test'); },3000); } function loading5() { $('body').loading({ loadingWidth:240, title:'请稍等!', name:'test', discription:'这是一个描述...', direction:'column', type:'pic', originBg:'#71EA71', originDivWidth:60, originDivHeight:60, originWidth:6, originHeight:6, smallLoading:false, loadingBg:'#389A81', loadingMaskBg:'rgba(123,122,222,0.2)' }); setTimeout(function(){ removeLoading('test'); },3000); } function loading6() { $('body').loading({ loadingWidth:240, title:'请稍等!', name:'test', discription:'这是一个描述...', direction:'row', type:'pic', originBg:'#71EA71', originDivWidth:60, originDivHeight:60, originWidth:6, originHeight:6, smallLoading:false, loadingBg:'rgba(20,125,148,0.8)', loadingMaskBg:'rgba(123,122,222,0.2)' }); setTimeout(function(){ removeLoading('test'); },3000); } function loading7() { $('body').loading({ loadingWidth:240, title:'请稍等!', name:'test', discription:'这是一个描述...', direction:'row', type:'origin', originBg:'#71EA71', originDivWidth:30, originDivHeight:30, originWidth:4, originHeight:4, smallLoading:false, titleColor:'#388E7A', loadingBg:'#312923', loadingMaskBg:'rgba(22,22,22,0.2)' }); setTimeout(function(){ removeLoading('test'); },3000); } function loading8(){ $('body').loading({ loadingWidth:220, title:'提示', name:'test', titleColor:'#fff', discColor:'#EDEEE9', discription:'颜色搭配,我不太懂', direction:'column', type:'origin', originBg:'#ECCFBB', originDivWidth:40, originDivHeight:40, originWidth:6, originHeight:6, smallLoading:false, loadingBg:'rgba(56,43,14,0.8)', loadingMaskBg:'rgba(66,66,66,0.2)' }); setTimeout(function(){ removeLoading('test'); },3000); } function loading10(){ $('body').loading({ loadingWidth:240, title:'请稍等!', name:'test', animateIn:'none', discription:'这是一个描述...', direction:'row', type:'origin', mustRelative:true, originBg:'#71EA71', originDivWidth:30, originDivHeight:30, originWidth:4, originHeight:4, smallLoading:false, titleColor:'#388E7A', loadingBg:'#312923', loadingMaskBg:'rgba(22,22,22,0.2)' }); setTimeout(function(){ removeLoading('test'); },3000); } </script> </html>

评论收藏

内容反馈