在發生加載事件時顯示加載程序，並在加載背景圖像時刪除加載程序

Question

我有兩個div。 1 ：加載背景圖片的位置2 ： 加載gif的位置。

我想要的是，當調用window.load()事件時，應該顯示loader gif ，而當背景圖像完全加載后，應該刪除loader gif 。 這就是我想要實現的。

 $(window).load(function (){ $('.background_image_div').load(function(){ $('.gif_loader_image').hide(); }); }); // this code is not working. 

 .background_image_div{ background: url(http://www.banneredge.com/images/portfolio.jpg); width: 600px; height: 300px; margin: 0 auto; border: thin black solid; z-index: 900; } .gif_loader_image{ position: absolute; width: 50px; height: 50px; background: url(https://media0.giphy.com/media/3oEjI6SIIHBdRxXI40/200_s.gif); // border: thin red solid; left: 55%; bottom: 15%; z-index: 1001; } 

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

謝謝。

Answer 1

代替$(window).load(function (){做一個$( document ).ready(function() { as，

$( document ).ready(function() {
  // Handler for .ready() called.
  $('.background_image_div').load(function(){
     $('.gif_loader_image').hide();
  });
});

與從此處獲取的圖像一起使用時的LOAD事件的編輯警告， .load API

編輯2嘗試輪詢，繼續輪詢並使用.length > 0檢查div中的圖像。 對您的html進行一些更改，

保留一個div，然后使用這種結構在其中保留一個圖像標簽， <div id="backgroundImageDiv"><img src="whatEverTheURLIs" id="backgroundImageID"></div>

在您的輪詢器內部檢查$("#backgroundImageDiv > #backgroundImageID").length() > 0

如果條件滿足，請使用.hide()隱藏gif加載程序。 請檢查語法。

輪詢器是指間隔計時器。

Answer 2

您可以像這樣操作。 只看這個連結

<div class="feature"><div class="loader"><img src="http://www.ajaxload.info/cache/FF/FF/FF/00/00/00/1-0.gif"></div></div>


$(function(){
    var bgimage = new Image();      
    bgimage.src="http://cdn.wonderfulengineering.com/wp-content/uploads/2016/01/nature-wallpapers-10.jpg";       

    $(bgimage).load(function(){
        $(".feature").css("background-image","url("+$(this).attr("src")+")").fadeIn(2000);   
            $(".loader").hide();
    });
});

http://jsfiddle.net/n4d9xxon

Answer 3

您可以這樣嘗試：

 $(document).ready(function (){ $('.gif_loader_image').fadeOut(1000); }); 

 body{ background: url(http://www.banneredge.com/images/portfolio.jpg); width: 100%; height: auto; } .gif_loader_image{ position: fixed; width: 100%; height: 100%; left: 0px; bottom: 0px; z-index: 1001; background:rgba(0,0,0,.8); text-align:center; } .gif_loader_image img{ width:30px; margin-top:40%; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="gif_loader_image"> <img src="https://media0.giphy.com/media/3oEjI6SIIHBdRxXI40/200_s.gif" alt="Loader..."/> </div> <div class="background_image_div"></div> 

Answer 4

主要的問題是您的$(window).load甚至不會啟動

為什么

由於jQuery 3完全刪除了.load()方法，並且由於您使用的是3.1.1版本，因此代碼不起作用也就不足為奇了。 您現在必須使用.on()方法來達到相同的效果

所以

$(window).load(function (){
    $('.background_image_div').load(function(){
      $('.gif_loader_image').hide();
    });
});

會變成

$(window).on('load', function (){
    $('.background_image_div').on('load', function(){
      $('.gif_loader_image').hide();
    });
});

注意

由於您在一開始就已經擁有$(window).load函數，因此不必為背景圖像再次定義它，因為只有在所有圖像都完全加載后才會觸發此方法，因此我認為您也應該做這份工作。

jQuery的

$(window).on('load', function () {
    $('.gif_loader_image').hide();
});