時機的頁面加載器僅使用imagesLoaded

我覺得我很接近搞清楚了這一點可見的圖像，但我不在的JavaScript和jQuery精通。我試圖使用的解決方案是imagesLoaded（http://imagesloaded.desandro.com/）。時機的頁面加載器僅使用imagesLoaded

從本質上講，我想大模態內容（隱藏在頁面加載）頁面出現加載更快。換句話說，即使模態圖像在後臺繼續加載，我也希望加載器（帶有微調器的灰色覆蓋圖）清除可見圖像加載時的狀態。

我的策略是建立在HTML一個div並在其中放置每個可視圖像的副本。在我的CSS中，我將這個div設置爲「display：none;」並且可能將其定位在'-9999'上方並離開。所以這個div將加載圖像，但從來沒有畫在屏幕上。

現在，我要觸發「.fadeOut」功能裝載機元素與imagesLoaded，分配給上述股利。這樣，當剩餘的隱藏模式圖像完成加載時，UI將顯示就緒。

我想這是jQuery的如下：

<script> 
 

 
$('#container').imagesLoaded(function() { 
 
    $(".loader").fadeOut("slow"); 
 
\t $(".spinner").fadeOut("slow"); 
 
\t $(".spinnerwrapper").fadeOut("slow"); 
 
}); 
 

 
</script>

.loader { 
 
\t position: fixed; 
 
\t top: 77px; 
 
\t background-color: #000; 
 
\t opacity:0.80; 
 
\t filter:alpha(opacity=80); /* For IE8 and earlier */ 
 
\t left: 0px; 
 
\t width: 100%; 
 
\t height: 100%; 
 
\t z-index: 900; 
 
} 
 

 
\t #container { 
 
\t position: fixed; 
 
\t display:none; 
 
\t left: -9999px; 
 
\t top: -9999px; 
 
}

<!-- page header --> 
 
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script> 
 

 
<script src="https://npmcdn.com/[email protected]/imagesloaded.pkgd.min.js"></script></head> 
 

 
<div id="spinnerwrapper"> 
 
\t \t <div class="spinner"></div> 
 
\t </div> 
 
\t 
 
\t <div class="loader"></div> 
 

 
<!-- visible page content --> 
 

 
<div id="container"> 
 
\t <img src="images/image_1.jpg"> 
 
    <img src="images/image_2.jpg"> 
 
    <img src="images/image_3.jpg"> 
 
    <!-- etc --> 
 
</div> 
 
</body> 
 

 
<!-- hidden modal content -->

我幾乎可以肯定我的語法是錯誤的存在。我只是在學習腳本的基礎知識。任何人都可以解決這個問題嗎？或者提供一個解決方案？

來源

2016-10-11 evanonearth

收到錯誤消息：遺漏的類型錯誤：$（...）imagesLoaded不是一個函數 – evanonearth

你能解釋爲什麼你用左：-9999px; ＆top：-9999px; ??在容器ID？另一個問題是爲什麼使用spinnerwrapper，spinner div？你寫腳本的主要問題是錯誤的。您通過CSS設置Container ID display none。但是在裝載機淡出後你不會顯示它。 [https://jsfiddle.net/tjbaezid/tmqsd8uo/] –

要觸發有點像.fadeOut()，你可以使用它像這樣：

$('#container').imagesLoaded({ 
    // options... 
    }, 
    function() { 
     $('.fade-it').delay(2000).fadeOut(500); 
});

退房小提琴看到它火了：https://jsfiddle.net/qx5eoo3j/

來源

2016-10-11 19:00:49

您的JS一些錯誤，試試這個：

$('#container').imagesLoaded({}, function() { 
    $(".loader").fadeOut("slow"); 
    $(".spinner").fadeOut("slow"); 
    $(".spinnerwrapper").fadeOut("slow"); 
    $('#container').show(); 
});

JSFiddle

來源

2016-10-11 19:10:32 Lorenzo

我仍然得到消息：遺漏的類型錯誤：$（...）imagesLoaded不是一個函數，這是否意味着腳本源鏈接是不正確的？ – evanonearth

這意味着imageLoaded未加載 – Lorenzo

我希望這會爲你工作（我只加樣品圖像更多然後3）刪除元素是[位置：固定; left：-9999px; & top：-9999px;從CSS #container spinnerwrapper，從HTML部分微調DIV。因爲我沒有看到那些用途]。如果您對此答案有任何疑問，請發表評論。 LiveOnFiddle

$('#container').imagesLoaded(function() { 
 
    $(".loader").fadeOut("slow"); 
 
    $('#container').show(); 
 
});

.loader { 
 
    \t position: fixed; 
 
    \t top: 0; 
 
    \t background-color: #000; 
 
    \t opacity: 0.80; 
 
    \t filter: alpha(opacity=80); 
 
    \t /* For IE8 and earlier */ 
 
    \t left: 0px; 
 
    \t width: 100%; 
 
    \t height: 100%; 
 
    \t z-index: 900; 
 
    \t } 
 
    \t 
 
    \t #container { 
 
    \t display: none; 
 
    \t }

<head> 
 
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script> 
 

 
<script src="https://npmcdn.com/[email protected]/imagesloaded.pkgd.min.js"></script> 
 
</head> 
 

 
<body> 
 
    <div class="loader"></div> 
 

 
<!-- visible page content --> 
 

 
<div id="container"> 
 
    <img src="http://placehold.it/350x150"> 
 
    <img src="http://placehold.it/350x150"> 
 
    <img src="http://placehold.it/350x150"> 
 
    <img src="http://placehold.it/350x150"> 
 
    <img src="http://placehold.it/350x150"> 
 
    <img src="http://placehold.it/350x150"> 
 
    <img src="http://placehold.it/350x150"> 
 
    <img src="http://placehold.it/350x150"> 
 
    <img src="http://placehold.it/350x150"> 
 
    <img src="http://placehold.it/350x150"> 
 
    <img src="http://placehold.it/350x150"> 
 
    <img src="http://placehold.it/350x150"> 
 
    <img src="http://placehold.it/350x150"> 
 
    <img src="http://placehold.it/350x150"> 
 
    <img src="http://placehold.it/350x150"> 
 
    <img src="http://placehold.it/350x150"> 
 
    <img src="http://placehold.it/350x150"> 
 
    <img src="http://placehold.it/350x150"> 
 
    <img src="http://placehold.it/350x150"> 
 
    <img src="http://placehold.it/350x150"> 
 
    <img src="http://placehold.it/350x150"> 
 
    <img src="http://placehold.it/350x150"> 
 
    <img src="http://placehold.it/350x150"> 
 
    <img src="http://placehold.it/350x150"> 
 
    <img src="http://placehold.it/350x150"> 
 
    <img src="http://placehold.it/350x150"> 
 
    <img src="http://placehold.it/350x150"> 
 
    <img src="http://placehold.it/350x150"> 
 
    <img src="http://placehold.it/350x150"> 
 
    <img src="http://placehold.it/350x150"> 
 
    <img src="http://placehold.it/350x150"> 
 
    <img src="http://placehold.it/350x150"> 
 
    <img src="http://placehold.it/350x150"> 
 
    <img src="http://placehold.it/350x150"> 
 
    <img src="http://placehold.it/350x150"> 
 
    <img src="http://placehold.it/350x150"> 
 
    <img src="http://placehold.it/350x150"> 
 
<!-- etc --> 
 
</div> 
 
    </body>

來源

2016-10-11 20:03:17

時機的頁面加載器僅使用imagesLoaded

回答

相關問題