在显示div之前加载图像

Question

我之前从未询问过此论坛上的任何内容，所以我会尽可能地澄清。 我想显示一个加载屏幕，而div的内容正在我的网站中加载。

我试图使用jQuery .load（）函数，但它似乎不工作。 它工作时，我使用.ready（）函数，但我想加载之前显示div的所有图像。

所以DIV是隐藏的（风格= “显示：无;”）

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="loading"> // loading screen </div> 
 
<div id="divtoshow" style="display:none;"> //images and text </div> 
 

 
<script> 
 
$("#divtoshow").load(function(){ 
 
    $("#loading").fadeOut(200); 
 
    $("#divtoshow").fadeIn(200); 
 
}); 
 
//if i replace load with ready it works 
 
</script>

Answer 1

如果你想使用​​方法，你需要将它绑定到img元素不到容器：

$("#divtoshow img").on('load', function(){ 
 
    $("#loading").fadeOut(200, function(){ 
 
    $("#divtoshow").fadeIn(200) 
 
    }) 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="loading">Loading</div> 
 
<div id="divtoshow" style="display:none;"><img src="http://lorempixel.com/350/150"><h1>My Text</h1></div>

Answer 2

如果你想转换到显示主网页的div然后要我们根本的document.ready模式之前的页面内容加载：

<div id="loading"> // loading screen </div> 
<div id="divtoshow" style="display:none;"> //images and text 
<img src='...a path to a large file....'/> 
</div> 

然后

<script> 
$(document).ready(function() { 
    $("#loading").fadeOut(200); 
    $("#divtoshow").fadeIn(200); 
}); 
</script> 

一般，如果您正在使用JQuery进行任何元素（DOM）操作，并且您没有document.ready（）模式，那么您应该问问自己是否应该添加它。特别是如果您使用本地资产进行开发，因为当您转移对生产和网络延迟产生影响您可能会发现时间问题导致代码中出现奇怪的错误，这些错误在所有资产都是本地的情况下都可以正常工作

Answer 3

你想要做的东西，特别是当所有的页面上的图像有loaded.Try这个自定义jQuery的事件......

/** 
* Exposes an event called "imagesLoaded" which is triggered 
* when all images on the page have fully loaded. 
*/ 
(function($) { 
    var loadImages = new Promise(function(done) { 
     var loading = $("img").length; 
     $("img").each(function() { 
      $("<img/>") 
       .on('load', function() { 
        loading--; 
        if (!loading) done(); 
       }) 
       .on('error', function() { 
        loading--; 
        if (!loading) done(); 
       }) 
       .attr("src", $(this).attr("src")) 
     }); 
    }); 
    loadImages.then(function() { 
     $(document).trigger({ 
      type: "imagesLoaded" 
     }); 
    }); 
})(jQuery); 

它通过复制每个图像（在它们已经加载的情况下，这是捕获负载事件所必需的），并监听副本上的负载。我从here得到了主意。

Here is a fiddle.

Answer 4

CSS

#loading { 
    width: 100%; 
    height: 100%; 
    top: 0; 
    left: 0; 
    position: fixed; 
    display: block; 
    opacity: 0.7; 
    background-color: #fff; 
    z-index: 99; 
    text-align: center; 
} 

#loading-image { 
    position: absolute; 
    top: 100px; 
    left: 240px; 
    z-index: 100; 
} 

HTML

<div id="loading"> 
    <img id="loading-image" src="images/ajax-loader.gif" alt="Loading..." /> 
</div> 

JAVASCRIPT

<script language="javascript" type="text/javascript"> 
    $(window).load(function() { 
    $('#loading').hide(); 
    }); 
</script> 

Answer 5

负载（）方法jQuery中弃用版本1.8，并在版本3.0中删除。你可以使用window on.load函数，或者你也可以按照DaniP的回答。这是preloader的一个例子。
还有一个问题是您正在尝试加载已经不显示任何内容的#divtoshow。所以，你需要在该div

$(window).on('load', function() { 
 
    $("#loading").fadeOut(); 
 
    $("#divtoshow").fadeIn(300); 
 
});

#divtoshow { 
 
display: none; 
 
    text-align: center; 
 
} 
 
#loading{ 
 
    position: absolute; 
 
    left: 50%; 
 
    top: 50%; 
 
    z-index: 1; 
 
    width: 150px; 
 
    height: 150px; 
 
    margin: -75px 0 0 -75px; 
 
    border: 16px solid #f3f3f3; 
 
    border-radius: 50%; 
 
    border-top: 16px solid #3498db; 
 
    width: 120px; 
 
    height: 120px; 
 
    -webkit-animation: spin 2s linear infinite; 
 
    animation: spin 2s linear infinite; 
 
} 
 

 
@-webkit-keyframes spin { 
 
    0% { -webkit-transform: rotate(0deg); } 
 
    100% { -webkit-transform: rotate(360deg); } 
 
} 
 

 
@keyframes spin { 
 
    0% { transform: rotate(0deg); } 
 
    100% { transform: rotate(360deg); } 
 
} 
 
/* Add animation to "page content" */ 
 
.animate-bottom { 
 
    position: relative; 
 
    -webkit-animation-name: animatebottom; 
 
    -webkit-animation-duration: 1s; 
 
    animation-name: animatebottom; 
 
    animation-duration: 1s 
 
} 
 

 
@-webkit-keyframes animatebottom { 
 
    from { bottom:-100px; opacity:0 } 
 
    to { bottom:0px; opacity:1 } 
 
} 
 

 
@keyframes animatebottom { 
 
    from{ bottom:-100px; opacity:0 } 
 
    to{ bottom:0; opacity:1 } 
 
} 
 
.img-responsive{ 
 
width:100%; 
 
height:auto; 
 
display:block; 
 
margin:0 auto; 
 
} 
 

 

<div id="loading"></div> 
 
    <div id="divtoshow" class="animate-bottom"> 
 
<img src="http://orig10.deviantart.net/f6bf/f/2007/054/1/9/website_banner_landscape_by_kandiart.jpg" class="img-responsive" alt="banner "/> 
 
    <h2> loaded Title!</h2> 
 
    <p>Some text and Image in my newly loaded page..</p> 
 
    
 
    </div> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>