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>

我看了做一个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脚本标记位于关闭body标记

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

Pagespeed - 延迟加载幻灯片图像

1 个答案: