【解決方法】javascriptまたはjqueryを使用してボタンクリックで画像をロードする

CSS を使用してマウスオーバーを処理することをお勧めします。画像の読み込みは、JQuery の「CSS」属性を使用して行うことができます。

試す：

<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>

$(document).ready(function () {
        $(".search").click(function (e) {
        $(".loading").css("background-image","url('loading.gif')");
        });
});

<div class="search"></div>

<div class="loading"></div>

編集: より完全な解決策 – 読み込み中に読み込みボックスで画面を覆い、完了後に AJAX 関数で再び非表示にする場合は、次のことを試してください。

<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;
	}

	.transparentCover
	{
		display:none;
		position:absolute;
		left:0px;
		top:0px;
		width:100%;
		height:100%;
		background:#000000;
		opacity:0.4;
		filter:alpha(opacity=40);
		-moz-opacity:0.4;
		-khtml-opacity:0.4;
		z-index:100;
	}

	.loading
	{
		display:none;
		position: fixed;
  		left: 50%;
   		top: 50%;
    		background-color: white;
    		height: 400px;
    		margin-top: -200px;
    		width: 600px;
    		margin-left: -300px;
		text-align:center;
		background:url('loading.gif') no-repeat center 50%;
		z-index:101;
	}

</style>

$(document).ready(function () {
    $(".search").click(function (e) {

        // show the loading box and cover
        $(".transparentCover").show();

        $(".loading").show();

        // call your loading code here
        doLoad();

    });
});

function doLoad() {

    var myParam = 'somevalue';

        $.ajax({
            url: "/AJAX/myFunc.asmx/loadData",
            type: "POST",
            dataType: "json",
            data: "{param1:" + myParam + "}",
            contentType: "application/json; charset=utf-8",
            success: function (msg) {

            // AJAX returned successfully, so hide loading box
            $(".transparentCover").hide();

            $(".loading").hide();

            }
        });
}

<div class="search"></div>

<div class="transparentCover"></div>

<div class="loading"></div>

コードに問題がありました。

1. cssファイルが含まれていないと思います showLoading.css ページとともに。
以下のように含めるだけです。

<link href="showLoading/css/showLoading.css" rel="stylesheet" media="screen" />

2. 読み込み中の画像は div に表示されます divMsg、しかしdivにはありません activity_pane.
したがって、jQuery コードは次のようになります。

<script type="text/javascript">
$(document).ready(function () {
    $("#search").click(function (e) {

        jQuery('#divMsg').showLoading();
        // complete functionality
        // Here I have made ajax call to the action method
        // and executed the required functionality successfully

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

});
</script>

3. div に no display none があってはなりません divMsg cssファイルで行われるように、空白にする必要があります。つまり、読み込み中の画像はありません。 showLoading.css CSSクラスで .loading-indicator.
したがって、divは次のようになります。

<div id="divMsg">
</div>

ダウンロード

1. 私のプロジェクト：- jQuery 読み込みイメージ[^]

ダウンロードして、私がどのようにそれをしたかを見てください。
2 つの html ファイルが見つかります。 loading.html もう1つは、私が参照した場所からの参照です。 jquery.showLoading.example.html.

2. 参照プロジェクト:- jQuery showLoading プラグイン[^].
への参照プロジェクトが見つかります。 .zip としてダウンロード.

ありがとう…

こんにちは、はい、JavaScript でアップロードできます。 ステップは、最初にbase64で画像を変換し、次に画像のURLをこれにリンクします。

次のコードに従ってください。

<form id="form1" runat="server">
    <div>
        <asp:Image ID="imgEmployee"  runat="server" ImageUrl="" Width="100px"
                    Height="120px" />

        <script type="text/javascript">
            function handleFileSelect(evt) {

                var fileUpload = document.getElementById('<%=photoUpload.ClientID%>');
                var imgEmployee = document.getElementById('<%=imgEmployee.ClientID%>');

                var files = evt.target.files; // FileList object
                // Loop through the FileList and render image files as thumbnails.
                for (var i = 0, f; f = files[i]; i++) {

                    // Only process image files.
                    if (!f.type.match('image.*')) {
                        continue;
                    }
                    var reader = new FileReader();
                    var base64Data;

                    reader.onload = (function (theFile) {
                        return function (e) {
                            // Render thumbnail.
                            var span = document.createElement('span');

                            base64Data = e.target.result;
                            var fileSize = base64Data.length;
                            var IndexData = base64Data.indexOf('base64,');
                            var fileName = escape(theFile.name);
                            imgEmployee.src = base64Data;


                        };
                    })(f);
                    // Read in the image file as a data URL.
                    reader.readAsDataURL(f);
                }
            }





        </script>
        <div>

<asp:FileUpload runat="server" ID="photoUpload" TabIndex="7"  onchange="handleFileSelect(event)"   />


        </div>

    </div>
    </form>