适合移动端和PC端解决和避免form表单重复提交的方法

在提交表单时由于网络速度慢或性能问题,页面并没有及时响应。用户会无意识点击提交按钮,造成数据反复提交。

这一现象在移动手机浏览器比较明显,现阶段移动端性能同PC还存在很大差异。

在移动端浏览器中等待响应的通用方式是使用indicator控件,所以我建议大家做这块功能时采用同移动UI统一的方式。

我在身边便条应用中使用了jquery.loading-indicator插件,总体感觉不错。

使用的效果如下:

火狐截图_2015-06-26T08-56-29.272Z

使用方法

// 给提交框加个防刷新

$(“#submit”).click(function(){
var homeLoader = $(‘body’).loadingIndicator({
useImage: false,
}).data(“loadingIndicator”);
});

插件下载地址

https://github.com/tobaiasjl/jquery.loading-indicator

jQuery Loading Indicator

A small plugin to add an loading indicator to your page via javascript. You can choose to use an animated GIF or some CSS3 magic. The loader can be added to any block element. It is very easy to customize via css or less.

Here’s a small demo and the documentation.

Check this page for some awesome CSS3 loaders.

Getting Started

1. First you have to download all files from github.
2. Add the Stylesheet and Javascript to the head.

<script src=”/path/to/jquery.min.js”></script>
<script src=”/path/to/jquery.loading-indicator.js”></script>

<link type=”text/css” rel=”stylesheet” href=”/path/to/jquery.loading-indicator.css” />

3. Call plugin

$(‘body’).loadingIndicator();