TechQA.

preloading images in a css3 background slideshow

864 views Asked by At

I am working on a CSS3 landing page for a client of mine that uses background images. I am having trouble getting images to preload.

I saw this method but am unsure how to apply it to this scenario: http://perishablepress.com/preload-images-css3/

Website: http://museiam.ca/splash/

HTML:

<!DOCTYPE html>
<!--[if lt IE 7 ]> 
<html class="ie ie6 no-js" lang="en">
   <![endif]-->
   <!--[if IE 7 ]>    
   <html class="ie ie7 no-js" lang="en">
      <![endif]-->
      <!--[if IE 8 ]>    
      <html class="ie ie8 no-js" lang="en">
         <![endif]-->
         <!--[if IE 9 ]>    
         <html class="ie ie9 no-js" lang="en">
            <![endif]-->
            <!--[if gt IE 9]><!-->
            <html class="no-js" lang="en">
               <!--<![endif]-->
               <head>
                  <meta charset="UTF-8" />
                  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
                  <title>MUSEIAM.ca</title>
                  <meta name="viewport" content="width=device-width, initial-scale=1.0">
                  <meta name="description" content="MUSEIAM.ca" />
                  <meta name="keywords" content="keyword1, keyword2" />
                  <meta name="author" content="MUSEIAM.ca" />
                  <link rel="shortcut icon" href="../favicon.ico">
                  <link rel="stylesheet" type="text/css" href="css/style1.css" />
                  <script type="text/javascript" src="js/modernizr.custom.86080.js"></script>
               </head>
               <body id="page">

                  <div id class="cb-slideshow">
                     <li><span>Image 01</span></li>
                     <li><span>Image 02</span></li>
                     <li><span>Image 03</span></li>
                     <li><span>Image 04</span></li>
                     <li><span>Image 05</span></li>
                     <li><span>Image 06</span></li>
                  </ul>
                  <IMG class="logo" src="images/logo.png" alt="...">
                  <a href="#"><IMG class="enter" src="images/enter.png" alt="..." onmouseover="this.src='images/enter2.png'" onmouseout="this.src='images/enter.png'" ></a><a href="#"><IMG class="enter2" src="images/entrer.png" alt="..." onmouseover="this.src='images/entrer2.png'" onmouseout="this.src='images/entrer.png'" ></a>
                  <div id="footer">&copy; 2014 MUSEIAM.CA. All Rights Reserved.</div>
               </body>
            </html>

CSS:

@font-face {
    font-family: 'BebasNeueRegular';
    src: url('fonts/BebasNeue-webfont.eot');
    src: url('fonts/BebasNeue-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/BebasNeue-webfont.woff') format('woff'),
         url('fonts/BebasNeue-webfont.ttf') format('truetype'),
         url('fonts/BebasNeue-webfont.svg#BebasNeueRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}
/* CSS reset */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { 
    margin:0;
    padding:0;
}
html,body {
    margin:0;
    padding:0;
}
table {
    border-collapse:collapse;
    border-spacing:0;
}
fieldset,img { 
    border:0;
}
input{
    border:1px solid #b0b0b0;
    padding:3px 5px 4px;
    color:#979797;
    width:190px;
}
address,caption,cite,code,dfn,th,var {
    font-style:normal;
    font-weight:normal;
}
ol,ul {
    list-style:none;
}
caption,th {
    text-align:left;
}
h1,h2,h3,h4,h5,h6 {
    font-size:100%;
    font-weight:normal;
}
q:before,q:after {
    content:'';
}
abbr,acronym { border:0;
}
/* General Demo Style */
body{
    font-family: Constantia, Palatino, "Palatino Linotype", "Palatino LT STD", Georgia, serif;
    background: #000;
    font-weight: 400;
    font-size: 15px;
    color: #aa3e03;
    overflow-y: scroll;
    overflow-x: hidden;
}
.ie7 body{
    overflow:hidden;
}
a{
    color: #333;
    text-decoration: none;
}
t-align: center;
}
.clr{
    clear: both;
}
img.logo{
    position: absolute;
    top: 180px;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}
img.enter{
    position: absolute;
    top: 340px;
    bottom: 0;
    left: -105px;
    right: 0;
    margin: auto;
    padding: 0px 0px 50px 0px;
}
img.enter2{
    position: absolute;
    top: 340px;
    bottom: 0;
    left: 105px;
    right: 0;
    margin: auto;
    padding: 0px 0px 50px 0px;
    }
#footer {
    font-family: "Times New Roman", Times, serif;
    font-size: 12px;
    position: fixed;
    bottom: 0;
    right: 5px; 
    text-align: right;
    color: #fff;
}
/* Media Queries */
@media screen and (max-width: 767px) {
    .container > header{
        text-align: center;
    }
}lor: #fff;
}
.cb-slideshow,
.cb-slideshow:after { 
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    z-index: 0; 
}
.cb-slideshow:after { 
    content: '';
    background: transparent url(../images/pattern.png) repeat top left; 
}
.cb-slideshow li span { 
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    color: transparent;
    background-size: cover;
    background-position: 50% 50%;
    background-repeat: none;
    opacity: 0;
    z-index: 0;
    -webkit-backface-visibility: hidden;
    -webkit-animation: imageAnimation 36s linear infinite 0s;
    -moz-animation: imageAnimation 36s linear infinite 0s;
    -o-animation: imageAnimation 36s linear infinite 0s;
    -ms-animation: imageAnimation 36s linear infinite 0s;
    animation: imageAnimation 36s linear infinite 0s; 
}
.cb-slideshow li div { 
    z-index: 1000;
    position: absolute;
    bottom: 30px;
    left: 0px;
    width: 100%;
    text-align: center;
    opacity: 0;
    color: #fff;
    -webkit-animation: titleAnimation 36s linear infinite 0s;
    -moz-animation: titleAnimation 36s linear infinite 0s;
    -o-animation: titleAnimation 36s linear infinite 0s;
    -ms-animation: titleAnimation 36s linear infinite 0s;
    animation: titleAnimation 36s linear infinite 0s; 
}
.cb-slideshow li div h3 { 
    font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;
    font-size: 240px;
    padding: 0;
    line-height: 200px; 
}
.cb-slideshow li:nth-child(1) span { 
    background-image: url(../images/1.jpg) 
}
.cb-slideshow li:nth-child(2) span { 
    background-image: url(../images/2.jpg);
    -webkit-animation-delay: 6s;
    -moz-animation-delay: 6s;
    -o-animation-delay: 6s;
    -ms-animation-delay: 6s;
    animation-delay: 6s; 
}
.cb-slideshow li:nth-child(3) span { 
    background-image: url(../images/3.jpg);
    -webkit-animation-delay: 12s;
    -moz-animation-delay: 12s;
    -o-animation-delay: 12s;
    -ms-animation-delay: 12s;
    animation-delay: 12s; 
}
.cb-slideshow li:nth-child(4) span { 
    background-image: url(../images/4.jpg);
    -webkit-animation-delay: 18s;
    -moz-animation-delay: 18s;
    -o-animation-delay: 18s;
    -ms-animation-delay: 18s;
    animation-delay: 18s; 
}
.cb-slideshow li:nth-child(5) span { 
    background-image: url(../images/5.jpg);
    -webkit-animation-delay: 24s;
    -moz-animation-delay: 24s;
    -o-animation-delay: 24s;
    -ms-animation-delay: 24s;
    animation-delay: 24s; 
}
.cb-slideshow li:nth-child(6) span { 
    background-image: url(../images/6.jpg);
    -webkit-animation-delay: 30s;
    -moz-animation-delay: 30s;
    -o-animation-delay: 30s;
    -ms-animation-delay: 30s;
    animation-delay: 30s; 
}
.cb-slideshow li:nth-child(2) div { 
    -webkit-animation-delay: 6s;
    -moz-animation-delay: 6s;
    -o-animation-delay: 6s;
    -ms-animation-delay: 6s;
    animation-delay: 6s; 
}
.cb-slideshow li:nth-child(3) div { 
    -webkit-animation-delay: 12s;
    -moz-animation-delay: 12s;
    -o-animation-delay: 12s;
    -ms-animation-delay: 12s;
    animation-delay: 12s; 
}
.cb-slideshow li:nth-child(4) div { 
    -webkit-animation-delay: 18s;
    -moz-animation-delay: 18s;
    -o-animation-delay: 18s;
    -ms-animation-delay: 18s;
    animation-delay: 18s; 
}
.cb-slideshow li:nth-child(5) div { 
    -webkit-animation-delay: 24s;
    -moz-animation-delay: 24s;
    -o-animation-delay: 24s;
    -ms-animation-delay: 24s;
    animation-delay: 24s; 
}
.cb-slideshow li:nth-child(6) div { 
    -webkit-animation-delay: 30s;
    -moz-animation-delay: 30s;
    -o-animation-delay: 30s;
    -ms-animation-delay: 30s;
    animation-delay: 30s; 
}
/* Animation for the slideshow images */
@-webkit-keyframes imageAnimation { 
    0% { opacity: 0;
    -webkit-animation-timing-function: ease-in; }
    8% { opacity: 1;
         -webkit-animation-timing-function: ease-out; }
    17% { opacity: 1 }
    25% { opacity: 0 }
    100% { opacity: 0 }
}
@-moz-keyframes imageAnimation { 
    0% { opacity: 0;
    -moz-animation-timing-function: ease-in; }
    8% { opacity: 1;
         -moz-animation-timing-function: ease-out; }
    17% { opacity: 1 }
    25% { opacity: 0 }
    100% { opacity: 0 }
}
@-o-keyframes imageAnimation { 
    0% { opacity: 0;
    -o-animation-timing-function: ease-in; }
    8% { opacity: 1;
         -o-animation-timing-function: ease-out; }
    17% { opacity: 1 }
    25% { opacity: 0 }
    100% { opacity: 0 }
}
@-ms-keyframes imageAnimation { 
    0% { opacity: 0;
    -ms-animation-timing-function: ease-in; }
    8% { opacity: 1;
         -ms-animation-timing-function: ease-out; }
    17% { opacity: 1 }
    25% { opacity: 0 }
    100% { opacity: 0 }
}
@keyframes imageAnimation { 
    0% { opacity: 0;
    animation-timing-function: ease-in; }
    8% { opacity: 1;
         animation-timing-function: ease-out; }
    17% { opacity: 1 }
    25% { opacity: 0 }
    100% { opacity: 0 }
}
/* Animation for the title */
@-webkit-keyframes titleAnimation { 
    0% { opacity: 0 }
    8% { opacity: 1 }
    17% { opacity: 1 }
    19% { opacity: 0 }
    100% { opacity: 0 }
}
@-moz-keyframes titleAnimation { 
    0% { opacity: 0 }
    8% { opacity: 1 }
    17% { opacity: 1 }
    19% { opacity: 0 }
    100% { opacity: 0 }
}
@-o-keyframes titleAnimation { 
    0% { opacity: 0 }
    8% { opacity: 1 }
    17% { opacity: 1 }
    19% { opacity: 0 }
    100% { opacity: 0 }
}
@-ms-keyframes titleAnimation { 
    0% { opacity: 0 }
    8% { opacity: 1 }
    17% { opacity: 1 }
    19% { opacity: 0 }
    100% { opacity: 0 }
}
@keyframes titleAnimation { 
    0% { opacity: 0 }
    8% { opacity: 1 }
    17% { opacity: 1 }
    19% { opacity: 0 }
    100% { opacity: 0 }
}
/* Show at least something when animations not supported */
.no-cssanimations .cb-slideshow li span{
    opacity: 1;
}

@media screen and (max-width: 1140px) { 
    .cb-slideshow li div h3 { font-size: 140px }
}
@media screen and (max-width: 600px) { 
    .cb-slideshow li div h3 { font-size: 80px }
}

Thank you for looking.

html css slideshow preload preloading
Original Q&A
1

There are 1 answers

0
CodeBoxCA On

This is what I do for preloading.

var imageArray = new Array();

window.onload = function(){
    for(i = 0; i <= maxIndex; ++i)
    {
        var image = new Image();
        image.src = "images/myImage" + Number(i + 1) + ".jpg";
        imageArray[i] = image;
    }
}

Name all the images like this: myImage1.jpg, myImage2.jpg ect. Then just iterate through this array to change the image. maxIndex is how many pictures you have.

Related Questions in HTML

Related Questions in CSS

Related Questions in SLIDESHOW

Related Questions in PRELOAD

Related Questions in PRELOADING

Popular Questions

Popular Tags

javascript python java c# php android html jquery c++ css ios sql mysql r reactjs node.js arrays c asp.net json python-3.x ruby-on-rails .net sql-server swift django angular objective-c pandas excel

Trending Questions