使用javascript或jquery在按钮上单击加载图像 [英] Loading image on button click using javascript or jquery

问题描述

我想在执行按钮点击功能时显示加载图像。

以下是我实现的代码。这是MVC3剃须刀引擎。




$。bshtml页面上的b $ b：

Hi, I want to show loading image while the button click funtionality is executed.
The following is the code I have implemented. This is in MVC3 razor engine.


on .cshtml page :

@using (Html.BeginForm())
{ 
  <div id="activity_pane">      
  <input id="search" type="image" src="../../Content/images/search.png"                onmouseout="this.src='../../Content/images/search.png'"                       önmouseover="this.src='../../Content/images/search_onhover.png'" />
                    
  <input id="reset" type="image" src="../../Content/images/reset.png" onmouseout="this.src='../../Content/images/reset.png'"                         önmouseover="this.src='../../Content/images/reset_onhover.png'" />
   <div id="divMsg" style="display: none;">
     <img src="../../Content/images/loading.gif" alt="Please wait.." />
   </div>
  </div>

在这个搜索按钮上我写了一个jquery，如下所示：

On this search button I have written a jquery which is as below :

$(document).ready(function () {
    $("#search").click(function (e) {
        
        jQuery('#activity_pane').showLoading();
        // complete functionality
        // Here I have made ajax call to the action method 
        // and executed the required functionality successfully 

        jQuery('#activity_pane').hideLoading();
    }); 

});   

我使用过jquery.showLoading.js和jquery-1.5.1.min.js文件来自jquery插件。

我无法显示加载图像...这对我不起作用:(上面的代码没有显示加载图像。即使我插入了一个延迟但没有用。

请帮助。

如果任何人可以提供任何其他方法来显示加载图像，而功能正在执行，这种方法也是最受欢迎的。 ..

I have used jquery.showLoading.js and jquery-1.5.1.min.js file from jquery plugin.
I'm not able to show the loading image ... This doesn't work for me :( The above code does not show the loading image. Even I have inserted a delay but of no use.
Please help.
If any one can provide with any other method to show loading image while the functionality is getting executed that approach is also most welcomed ...

推荐答案

（ document ）。ready（ function （）{

(document).ready(function () {

（ #search）。click（ function （e）{

jQuery（' < span class =code-string>＃activity_pane'）。showLoading（）;
// 完整功能
// 这里我对动作进行了ajax调用方法
// 并成功执行所需功能

jQuery（' ＃activity_pane'）。hideLoading（）;
}）;

}）;

("#search").click(function (e) { jQuery('#activity_pane').showLoading(); // complete functionality // Here I have made ajax call to the action method // and executed the required functionality successfully jQuery('#activity_pane').hideLoading(); }); });

我使用过jquery.showLoading.js和jquery-1.5.1.min.js文件来自jquery插件。

我无法显示加载图像...这对我不起作用:(上面的代码没有显示加载图像。即使我插入了一个延迟但没有用。

请帮助。

如果任何人可以提供任何其他方法来显示加载图像，而功能正在执行，这种方法也是最受欢迎的。 ..

I have used jquery.showLoading.js and jquery-1.5.1.min.js file from jquery plugin.
I'm not able to show the loading image ... This doesn't work for me :( The above code does not show the loading image. Even I have inserted a delay but of no use.
Please help.
If any one can provide with any other method to show loading image while the functionality is getting executed that approach is also most welcomed ...

最好使用CSS处理鼠标悬停，并且可以使用JQuery中的'CSS'属性完成图像加载。



尝试：

You are better off handling the mouse-overs using CSS, and the image loading can be done using the 'CSS' attribute in JQuery.

Try:

<style type="text/css">

	.search
	{
		width:150px;
		height:150px;
		background:url('search.png') no-repeat center 50%;		
		margin:10px;
		border:1px solid #000000;
		float:left;
	}

	.search:hover
	{
		width:150px;
		height:150px;
		background:url('search_onhover.png') no-repeat center 50%;
		cursor:pointer;		
		margin:10px;
		border:1px solid #000000;
		float:left;
	}

	.loading
	{
		width:150px;
		height:150px;
		margin:10px;
		border:1px solid #000000;
		float:left;
	}

</style>

这篇关于使用javascript或jquery在按钮上单击加载图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！