Skip to content

Instantly share code, notes, and snippets.

@kvzhuang

kvzhuang/imageload2.html

Created October 30, 2012 08:54
Show Gist options
  • Save kvzhuang/3979098 to your computer and use it in GitHub Desktop.
Save kvzhuang/3979098 to your computer and use it in GitHub Desktop.
Download ZIP
image preload test 2
Raw
imageload2.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="">
<meta name="created" content="2012-10-22">
<title> Prototype</title>
<link rel="stylesheet" href="http://yui.yahooapis.com/3.7.2/build/cssreset/reset-min.css">
<link rel="stylesheet" href="http://yui.yahooapis.com/3.7.2/build/cssfonts/fonts-min.css">
<script type="text/javascript" src="http://yui.yahooapis.com/3.7.2/build/yui/yui-min.js"></script>
<style type="text/css">
.image {
position: absolute;
background-color: blue;
}
.image2 {
position: absolute;
background-color: red;
}
.outside {
top: -700px;
left: 0;
}
.inside {
width: 500px;
height: 500px;
top: 0;
left: 0;
}
</style>
</head>
<body>
<span class="text">text 1</span>
<div class="image outside" width="500" height="500">
</div>
<div class="image2 outside" width="500" height="500">
</div>
<script>
var changeImg1, changeImg2;
YUI().use('node', function (Y) {
var timerid = 0, img, imgDiv, imgDiv2;
//small regular image files
/*var images = new Array( "http://dl.dropbox.com/u/10258402/logo/%E8%8E%8ALOGO_RGB-01.png",
"http://dl.dropbox.com/u/10258402/logo/%E8%8E%8ALOGO_RGB-02.png",
"http://dl.dropbox.com/u/10258402/elly_vietnam_05.jpg",
"http://dl.dropbox.com/u/10258402/logo/%E8%8E%8ALOGO-%E5%AE%9A%E7%A8%BF%E6%AA%94-01.jpg",
"http://dl.dropbox.com/u/10258402/47530_432264969258_677359258_4766069_1176094_n.jpg",
"http://dl.dropbox.com/u/10258402/DSCN0923.JPG",
"http://dl.dropbox.com/u/10258402/logo/%E8%8E%8ALOGO_RGB-04.png"
);*/
var images = new Array( //large file test
"http://dl.dropbox.com/u/10258402/%E5%A4%A7%E5%BC%B502.jpg",
"http://dl.dropbox.com/u/10258402/%E5%B0%8F%E5%BC%B503.JPG"
);
var countimages = 0;
imgDiv = Y.one(".image");
img = new Image;
img.width = "500";
img.height= "500";
img.onload = function(){
imgDiv.replaceClass("outside", "inside");
imgDiv2.replaceClass("inside", "outside");
changeImg1();
}
imgDiv.appendChild(img);
imgDiv2 = Y.one(".image2");
img2 = new Image;
img2.width = "500";
img2.height= "500";
img2.onload = function(){
imgDiv2.replaceClass("outside", "inside");
imgDiv.replaceClass("inside", "outside");
changeImg2();
}
imgDiv2.appendChild(img2);
changeImg1 = function () {
if(countimages == images.length) {
countimages = 0;
}
img2.src = images[countimages];
countimages++;
};
changeImg2 = function () {
if(countimages == images.length) {
countimages = 0;
}
img.src = images[countimages];
countimages++;
};
changeImg2();
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment