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