如何在div＃内容加载时显示div＃加载 [英] how to show div #loading whilst div #content loads

问题描述

我想要实现一个解决方案，其中：

1. 在div＃内容中加载内容时，


2. hide div #content，


3. show div #loading，


4. 然后当div #content载入时，


5. hide div #loading，


6. 淡入div #content

i已尝试过：

html：

 < div id =内容> 
 <！ - 这个东西需要很长时间才能加载 - > 
< img src =http://lorempixel.com/1920/1920/> 
< / div> 
< div id =loading> 
 <！ - 这是加载gif  - > 
< img src =http://lorempixel.com/400/200/> 
< / div> 
  

js：

  //当用户浏览页面
 $（'＃content'）。hide（）; 
 $（'＃loading'）。show（）; 
 
 //然后当div #content加载时，隐藏div＃加载并淡入div #content 
 $（'＃content'）。bind（'load'，function（）{ 
 $（'＃loading'）。hide（）; 
 $（'＃content'）。fadeIn（'slow'）; 
}）; 
  

这里是我工作的jsfiddle：

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

谢谢。根据 noreferrer> .load（）时，事件应该触发，当

加载事件发送到元素时并且所有子元素都已完全加载。这个事件可以发送到与URL关联的任何元素：图片，脚本，框架，iframe和窗口对象。

因此，您无法将加载事件处理程序绑定到 div 标记。当你想在图片加载后触发事件处理程序时，你必须将它绑定到图片上。 HTML：

 < div id =content> 
 <！ - 这个东西需要很长时间才能加载 - > 
< img id =largesrc =http://lorempixel.com/1920/1920/> 
< / div> 
< div id =loading> 
 <！ - 这是加载gif  - > 
< img src =http://lorempixel.com/400/200/> 
< / div> 
  

JS：

  //当用户浏览页面
 $（'＃content'）。hide（）; 
 $（'＃loading'）。show（）; 
 
 //然后当#content div加载
 $（'＃large'）。bind（'load'，function（）{
 $（'＃loading' ）.hide（）; 
 $（'＃content'）。fadeIn（'slow'）; 
}）; 
  

窗口对象，该对象会在触发时触发

页面已完全加载，包括图形。

JS：

  $（window）.bind（'load'，function（）{
 $（ '#loading'）。hide（）; 
 $（'＃content'）。fadeIn（'slow'）; 
}）; 
  

b

 函数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'）; 
} 
} 
 
 //当用户浏览页面
 $（'＃content'）。hide（）; 
 $（'＃loading'）。show（）; 
 
 //然后当#content div加载
 $（'＃content img'）。bind（'load'，allImagesLoaded）; 
  

JSFiddle

i am wanting to implement a solution where:

1. whilst contents in div #content are loading,
2. hide div #content,
3. show div #loading,
4. then when div #content has loaded,
5. hide div #loading,
6. fade in div #content

i have tried:

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

here is the jsfiddle i am working on:

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

thank you.

解决方案

According to .load(), the event should fire, when

The load event is sent to an element when it and all sub-elements have been completely loaded. This event can be sent to any element associated with a URL: images, scripts, frames, iframes, and the window object.

So, you cannot bind the load event handler to a div tag. When you want the event handler to fire after the image has loaded, you must bind it to the image

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

Or you can bind the event to the window object, which fires when

the page is fully loaded including graphics.

JS:

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

JSFiddle

Yet a third approach, would be to test if all images are loaded, when the load event fires

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

这篇关于如何在div＃内容加载时显示div＃加载的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！