Pagespeed - 推遲加載幻燈片圖像

Question

我想減少我的pagespeed和幻燈片我有我的主要障礙。爲了簡單起見，我只在下面的代碼中顯示使用3個圖像...我實際上有17個相當大的圖像。我試圖弄清楚的是如何將第一張圖像加載爲img src或base64，並將其餘的圖像推遲到加載完成之前。

HTML的幻燈片（使用jQuery和JS所謂loopedslider1）loopedSlider JS可以在這裏找到http://jsfiddle.net/tS27H/

<div id="slider"> 
<div id="loopedSlider1"> 
    <div class="container1"> 
     <div class="slides1"> 
      <div> 
       <img src="i/1.jpg" width="624" height="535" alt=""> 
        <p>Copyright © 2014 - All Rights Reserved.</p></div> 
      <div> 
       <img src="i/2.jpg" width="624" height="535" alt=""> 
        <p>Copyright © 2014 - All Rights Reserved.</p></div> 
      <div> 
       <img src="i/3.jpg" width="624" height="535" alt=""> 
        <p>Copyright © 2014 - All Rights Reserved.</p></div>      
      </div> 
     </div> 
     <div id=slider1-button-wrap> 
      <a class="previous slider1-button-left" href="#">Left</a> 
      <a class="next slider1-button-right" href="#">Right</a> 
     </div> 
    </div> 
</div> 

我看着做一個精靈，基數64，64基的精靈，推遲使用CSS圖片：

<script> 
function downloadAtOnload1() { 
var element1 = document.createElement("style"); 
element1.src = "xd.css"; 
document.body.appendChild(element1); 
} 
if (window.addEventListener) 
window.addEventListener("load", downloadAtOnload1, false); 
else if (window.attachEvent) 
window.attachEvent("onload", downloadAtOnload1); 
else window.onload = downloadAtOnload1; 
</script> 

<div id="image2"> 
    <p>Copyright © 2014 - All Rights Reserved.</p> 
</div> 

#image2{background-image: url(data:image/png;base64,longstring} 

我只能在使用html img src時才能獲得幻燈片放映。

任何建議將不勝感激。

Answer 1

確定...所以這裏是我如何解決這個

由1px的形象我叫blank.png

更改我的HTML這個

<div id="slider"> 
<div id="loopedSlider1"> 
    <div class="container1"> 
     <div class="slides1"> 
      <div> 
       <img src="i/1.jpg" width="624" height="535" alt=""> 
        <p>Copyright © 2014 - All Rights Reserved.</p></div> 
      <div> 
       <img id="i2" src="blank.png" width="624" height="535" alt=""> 
        <p>Copyright © 2014 - All Rights Reserved.</p></div> 
      <div> 
       <img id="i3" src="blank.png" width="624" height="535" alt=""> 
        <p>Copyright © 2014 - All Rights Reserved.</p></div>      
      </div> 
     </div> 
     <div id=slider1-button-wrap> 
      <a class="previous slider1-button-left" href="#">Left</a> 
      <a class="next slider1-button-right" href="#">Right</a> 
     </div> 
    </div> 
</div> 

留下創建一個非常小的1px的幻燈片放映中的第一張圖片，這是我想要展示的真實圖片之一，幻燈片放映中的延遲允許所有blank.png圖片都使用延遲JavaScript進行替換。

我的延遲js腳本標籤放置在html標記的最底部剛剛結束標記

<script> 
// Add a script element as a child of the body 
    function downloadJSAtOnload() { 
var element = document.createElement("script"); 
element.src = "x.js"; 
document.body.appendChild(element); 
} 
// Check for browser support of event handling capability 
if (window.addEventListener) 
window.addEventListener("load", downloadJSAtOnload, false); 
else if (window.attachEvent) 
window.attachEvent("onload", downloadJSAtOnload); 
else window.onload = downloadJSAtOnload; 
</script> 

我把我的x.js哪些文件

jQuery(function(){ 
$('#i2').attr('src','i/2.jpg') 
$('#i3').attr('src','i/3.jpg') 
});