javascript - Pagespeed - 延迟加载幻灯片图像

Question

我正在尝试降低我的页面速度，而我的幻灯片是我的主要障碍。为简单起见，我在下面的代码中只显示了 3 张图像……我实际上有 17 张相当大的图像。我想弄清楚的是如何将第一个图像加载为 img src 或 base64 并将其余图像推迟到加载完成。

幻灯片的 html(使用 jquery 和称为 loopedslider1 的 js)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>

我看着做一个 sprite，base64，base64 的 sprite，使用 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 替换所有 blank.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')
});