My main issue with reducing my pagespeed is the slideshow I have implemented. I currently have 17 rather large images in the slideshow, but for simplicity, I will only show the code for 3 images below. I am trying to find a way to load the first image as an img src or base64 and defer the loading of the remaining images until after the initial load is complete.
The html code for the slide show, which uses jquery and a Javascript called loopedslider1, can be found here: 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>
I have explored options like sprites, base64, and deferring images in CSS using the following code:
<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}
Currently, the slideshow only runs smoothly when using the html img src. Any suggestions on how to optimize this would be highly appreciated.