0

SO と Google を調べて、忙しいアイコンを既存の画像に重ねる簡単な方法を見つけようとしています。画像にフィルターと効果を適用している間、現在の画像の上にビジー アイコンを表示して、処理中であることをユーザーに知らせたいと思います。

jquery を使用して、プロセスの開始時に表示し、完了後に非表示にするオーバーレイ イメージを作成する必要がありますか?

すでにこれを行っている可能性のある人々からのアイデアを探しているだけです。

4

4 に答える 4

1

@Diodeusが言ったように、理想的には画像の周りにラッパーがあるので、読み込み中の画像の配置の問題は画像に比べて些細なことです。

ラッパーがオプションではない場合（つまり、既存の変更できないマークアップを使用している場合、またはラッパーがCSSをまとめて壊してしまう場合、それは世界の終わりではありません。画像の上にアイコンを配置するだけで、 jQueryを使用すると、相対的な親/祖先だけでなく、本体を基準にした要素の座標を簡単に取得できるという利点があります。

HTML（ネストされているのではなく、本文に直接配置します）

<img src='loading.png' id='loading' />

CSS

#loading { position: absolute; display: none; /* other styles, BG img etc */ }

JavaScript（el関連するページ要素です）

var loading_img = $('#loading');
function func_called_when_stuff_happening(el) {
    var el_coords = $(el).offset();
    loading_img.show().css({
        left: el_coords.left + (($(el).width() / 2) - (loading_img.width() / 2)),
        top: el_coords.top + (($(el).height() / 2) - (loading_img.height() / 2)),
    });
}

これにより、要素の中央にアイコンが配置されます。

于 2012-07-12T16:58:07.247 に答える
1

通常、コンテンツの上に画像を絶対的に配置します。この場合は画像です。配置を機能させるには、次のようなラッピング要素を使用する必要があります。

<div class="hasLoader">
    <img src="...your image..." />
    <img class="loading" src="...your LOADING image..." /> 
</div>

CSS:

.hasLoader {
    position:relative;
}

.loading {
    position:absolute;
    top:0;
    left:0;
}

適切な読み込みイメージが必要な場合は、AjaxLoadに優れたジェネレーターがあります。

于 2012-07-12T16:51:11.030 に答える
1

これを見てください：http://jsfiddle.net/dystroy/M3AnJ/

2 秒後、画像を正確に覆うオーバーレイが表示され、中央にスピナーが表示されます。

これが私がそれを行う方法です：

JavaScript :

setTimeout(function(){
var o = $('<div id=overlay></div>');
o.prependTo('body');
var img = $('#test');
var pos = img.offset();
o.css({left:pos.left, top:pos.top, width:img.width(), height:img.height()});
}, 2000);​

CSS :

#overlay {
    position: fixed;
    background-color:rgba(100,100,100,0.5);
    background-image: url("http://dystroy.org/loading.gif");
    background-position:center;
    background-repeat:no-repeat;
};​
于 2012-07-12T16:55:31.113 に答える
0

透明なGIFを作成し、JavaScriptを使用してターゲット画像の上に絶対に配置します。

var targetImage = document.getElementById("targImgID");
var ovrlay = document.createElement("IMG");
ovrlay.src = "\my\image\url\overlay.gif";
ovrlay.style.position = "absolute";
ovrlay.style.left = targetImage.offsetLeft + "px";
ovrlay.style.top = targetImage.offsetTop + "px";
document.body.appendChild(ovrlay);

これはデバッグされていないプロトタイプコードであり、ターゲットイメージの絶対位置の取得、オーバーレイのzインデックスの中央揃えと設定、removeChildを使用したものの削除など、いくつかの要素が省略されていますが、ここにあります。 d開始します。

于 2012-07-12T16:57:29.003 に答える