栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 面试经验 > 面试问答

如何在jquery ajax的后期数据处理期间设置加载图像?

面试问答 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

如何在jquery ajax的后期数据处理期间设置加载图像?

这是我用于加载图像的CSS +
HTML。我使用jQuery简单地添加了一个将不透明度从1更改为0的类,并结合了CSS过渡属性以实现淡入淡出效果。#loader的背景图片为220px X
80px,只是一个纯色的圆角矩形,其右侧为文本“ loading”。实际的“ ajax”微调器img高60像素,因此相对位置和负边距使img垂直居中。

   #loader {        width: 220px;        height: 80px;        position: fixed;        top: 50%;        left: 50%;        z-index: -1;        opacity: 0;        background: url(assets/images/bg-loader.png) no-repeat center center;        transition: all .5s ease-in-out;        margin: -40px 0 0 -110px;    }    #loader img {position: relative; top: 50%; margin-top: -30px; left: 10px;}    .loading #loader {z-index: 1000; opacity: 1.0}

和HTML(我从http://www.preloaders.net获得了loader.gif
):

    <div id="loader"><img src="<?php bloginfo('stylesheet_directory'); ?>/assets/images/loader.gif" /></div>

然后你的jQuery:

$("#id_btnpolls").click(function(){     var $body = $('body'),         valCheckedRadio = $('input[name=data[distributions]]:checked').val();    $body.addClass('loading');    $.ajax({        type: "POST",        url: "/pollanswers/checkpollanswers",        data: "valCheckedRadio="+valCheckedRadio,    success: function(prm){ //alert(prm); $("#id_color_polls").html(prm); $body.removeClass('loading');        }    });})


转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/384001.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号