在显示 div 元素之前加载图片

Question

我以前从未在这个论坛上提过问题，所以我会尽可能清晰地表达。 我正在尝试在我的网站中加载一个 div 的内容时显示一个加载屏幕。

我尝试使用 jQuery 的 .load() 函数，但似乎不起作用。 当我使用 .ready() 函数时它是有效的，但我想在显示 div 之前加载所有图片。

因此，div 是隐藏的（style="display:none;"）

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

- Davide Villa

---

load() 函数通常用于从服务器获取内容。因此，它出现问题并不令人意外。另一方面，ready() 函数特别设计用于在目标元素（即其附加的元素）的 DOM（即包含的元素）完全加载完成时执行某些操作。因此，ready 更符合您的需求。 - Vanquished Wombat

使用imagesLoaded http://imagesloaded.desandro.com/ - Bojan Petkovski

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

它的工作原理是复制每个图像（如果它们已经加载，这是必要的以捕获加载事件），并监听副本的加载。我从这里得到了灵感：这里。 这里有一个范例。

- I wrestled a bear once.

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>

- DaniP

Answer 3

The load() method was deprecated in jQuery version 1.8 and removed in version 3.0. you can use window on.load function OR you can also follow the DaniP answer. Here is an example with preloader.
One more problem you are trying to load the #divtoshow which is already display none. So you need to load something that inside on that 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>
  
  

- Baezid Mostafa

Answer 4

如果你想要在转换到显示主页面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() 模式，那么你应该考虑是否应该添加它。特别是当你使用本地资源进行开发时，因为当你转移到生产环境并且网络延迟有影响时，你可能会发现时间问题会导致代码中出现奇怪的错误，而在所有资源都是本地时完美运行的代码。

- Vanquished Wombat

Answer 5

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>

- Razia sultana