zoukankan      html  css  js  c++  java
  • 通过$.ajax设置预加载动画加强用户体验

    以前在jquery请求数据时,总喜欢用简洁的$.get与$.post提交数据,但有时发现由于网速的问题,有些时候网站加载js获得的数据会非常慢,于是就想能不能请求数据中间,给加载数据一个提示,增加用户体验。详细阅读了$.ajax的用法,觉得这个很合适,于是记录下来,以供参考:

    示例:

    $.ajax({
    			url:url,
    			type:'get',
    			dataType: "json",
    			beforeSend: function () {
    			    $("body").append('<div id="pload" style="position:fixed;top:30%;z-index:1200;background:url(/wap/images/loading.gif) top center no-repeat;100%;height:140px;margin:auto auto;"></div>');
    			},
    			complete: function () {
    			    $("#pload").remove();
    			},
    			success:function(result){
    

      上面使用beforeSend方法开始发送数据时在页面正中显示加载动画。当请求结束时使用complete方法结束加载提示

    效果如下:

  • 相关阅读:
    前端(基础篇)
    面向对象
    python(进阶篇)
    Python(基础篇)
    pycharm中添加python3 的环境变量
    MySQL与MongoDB的不同
    pycharm中添加python3 的环境变量
    ContentType&CORS&Git
    RESTful 组件
    Django REST_framework Quickstart
  • 原文地址:https://www.cnblogs.com/fogwang/p/6043573.html
Copyright © 2011-2022 走看看