Pagespeed - 延迟加载幻灯片图像

Question

我正在尝试降低页面速度，而我的幻灯片是我的主要障碍。为简单起见，我在下面的代码中仅显示使用 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>

我看着做一个精灵，base64，base64 的精灵，使用 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 x 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>

通过将第一张图片保留在幻灯片中，这是我想要展示的真实图片之一，幻灯片中的延迟允许使用延迟的 javascript 替换所有空白.png 图像。

我的 defer js 脚本标签放置在 html 标签的最底部，就在关闭 body 标签之前

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