Question

我之前从未在这个论坛上发过任何问题，所以我会尽可能地保持清醒。我试图在我的网站上加载div的内容时显示加载屏幕。

我尝试使用jQuery .load（）函数但似乎没有用。它在我使用.ready（）函数时有效但我想在显示div之前加载所有图像。

所以div是隐藏的（style =＆＃34; display：none;＆＃34;）

＆＃13;

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

＆＃13;

Answer 1

当页面上的所有图片都已加载时，你想要专门做一些事情。试试这个自定义的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 2

如果您想使用.load()方法，则需要将其绑定到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 3

如果您希望在转换之前加载页面内容以显示主页面div，那么您希望我们使用基本文档.ready pattern：

css2

然后

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

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

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版中弃用了load（）方法，在3.0版中删除了。你可以使用window on.load函数或者你也可以按照DaniP的答案。以下是预加载器的示例还有一个问题是你试图加载已经没有显示的#divtoshow。所以你需要加载那个div里面的东西

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

在显示div之前加载图像

5 个答案: