5

私はソリューションを実装したいと思っています:

  1. div #content のコンテンツが読み込まれている間、
  2. div #content を非表示、
  3. div #loading を表示、
  4. 次に、div #content が読み込まれると、
  5. div #loading を非表示、
  6. div #content でフェードイン

私が試してみました：

html:

<div id="content">
<!--this stuff takes a long time to load-->
<img src="http://lorempixel.com/1920/1920/">
</div>
<div id="loading">
<!-- this is the loading gif -->
<img src="http://lorempixel.com/400/200/">
</div>

js:

// when user browses to page
$('#content').hide();
$('#loading').show();

// then when div #content has loaded, hide div #loading and fade in div #content
$('#content').bind('load', function() {
$('#loading').hide();
$('#content').fadeIn('slow');
});

ここに私が取り組んでいるjsfiddleがあります:

http://jsfiddle.net/rwone/Y9CQ4/

ありがとうございました。

4

3 に答える 3

9

.load()によると、イベントが発生する必要があります。

load イベントは、要素とすべてのサブ要素が完全に読み込まれると、要素に送信されます。このイベントは、URL に関連付けられた任意の要素(画像、スクリプト、フレーム、iframe、および window オブジェクト) に送信できます。

そのため、load イベント ハンドラーをdivタグにバインドすることはできません。画像が読み込まれた後にイベント ハンドラーを起動する場合は、それを画像にバインドする必要があります。

HTML:

<div id="content">
<!--this stuff takes a long time to load-->
<img id="large" src="http://lorempixel.com/1920/1920/">
</div>
<div id="loading">
<!-- this is the loading gif -->
<img src="http://lorempixel.com/400/200/">
</div>

JS:

// when user browses to page
$('#content').hide();
$('#loading').show();

// then when the #content div has loaded
$('#large').bind('load', function() {
$('#loading').hide();
$('#content').fadeIn('slow');
});

JSFiddle

windowまたは、イベントをオブジェクトにバインドすることもできます。

ページはグラフィックを含めて完全に読み込まれます。

JS:

$(window).bind('load', function() {
$('#loading').hide();
$('#content').fadeIn('slow');
});

JSFiddle

さらに 3 番目のアプローチは、ロード イベントが発生したときに、すべての画像がロードされているかどうかをテストすることです。

function allImagesLoaded() {
    var imgs = $(this).closest('div').find('img');
    var loaded = 0;
    imgs.each(function() { if ($(this.complete)) ++loaded; });
    if (imgs.length == loaded) {
        $('#loading').hide();
        $('#content').fadeIn('slow');
    }
}

// when user browses to page
$('#content').hide();
$('#loading').show();

// then when the #content div has loaded
$('#content img').bind('load', allImagesLoaded);

JSFiddle

于 2013-01-22T09:33:51.137 に答える
0

たとえば、最初にuは、JSON、Ajax、またはJavascriptによってCODEBEHINFからデータを受信した後、DIVに画像を入力する必要があります。uはそれを変更できます。

  $('#DIV').html('<img src="images/loadinfo.gif" />');//here u fill the picture in ur div
    $.get('Jquery.aspx', { command: 'CartLoader', Send_T: Send_T },
      function (response) {                
       $('#DIV').html(response);// after receiving  data from code behind u can change it
       });
于 2013-01-22T10:09:18.877 に答える