The main goal of this code is to run throw all img tags and load the image to the client cache. During this, I've got and image that will appear by hiding div's above it...
Now, This are the answers I'm looking for:
Is this really caching the images ?
How to simulate the current animation with a less evasive code ?
Can this code be reduce ?
And Here's the wonderful code:
<?
require_once ("dbcon.php"); // Call all includes Files
/* dbQuery
* @_param -> Table
* @_param -> parameters
*/
$getdata = dbQuery("table_products_imgs","");
if (is_resource($getdata)) {
$count_pics = mysql_num_rows($getdata);
$pics_array = '<img src="components/img/constructer/bg/ajax-loader.gif" alt="" width="0" height="0"><br><img src="components/img/constructer/bg/bg_fans_comments.png" alt="" width="0" height="0"><br><img src="components/img/constructer/bg/bg_file404.png" alt="" width="0" height="0"><br><img src="components/img/constructer/bg/bg_highlights.png" alt="" width="0" height="0"><br><img src="components/img/constructer/bg/bg_media_hd.png" alt="" width="0" height="0"><br><img src="components/img/constructer/bg/bg_media_mod_switch.png" alt="" width="0" height="0"><br><img src="components/img/constructer/bg/bg_menu.png" alt="" width="0" height="0"><br><img src="components/img/constructer/bg/bg_mod404.png" alt="" width="0" height="0"><br><img src="components/img/constructer/bg/bg_mods.png" alt="" width="0" height="0"><br><img src="components/img/constructer/bg/bg_mods_hd.png" alt="" width="0" height="0"><br><img src="components/img/constructer/icons/drag.png" alt="" width="0" height="0"><br><img src="components/img/constructer/icons/view.png" alt="" width="0" height="0"><br><img src="components/img/constructer/links/2mark.png" alt="" width="0" height="0"><br><img src="components/img/constructer/links/facebook.png" alt="" width="0" height="0"><br><img src="components/img/constructer/links/hi5.png" alt="" width="0" height="0"><br><img src="components/img/constructer/links/youtube.png" alt="" width="0" height="0"><br>';
while ($pics = mysql_fetch_array($getdata)) {
if ($count_pics!=1) {
$pics_array .= '<img src="components/img/modules/'.$pics["img_folder"].'/'.$pics["img_name"].'" alt="" width="0" height="0"><br><img src="components/img/modules/'.$pics["img_folder"].'/W100px/'.$pics["img_name"].'" alt="" width="0" height="0"><br>';
}
$count_pics--;
}
}
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="pt" dir="ltr">
<head>
<title>Loading Contents</title>
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=ISO-8859-1">
<style type="text/css">
html,body{margin:0;padding:0;width:100%;height:100%;overflow:hidden;background:#000;color:#FFF;}
div#wrap,
div#ft,
div#img_count{text-align:center;font:normal normal 10px/12px Arial,Verdana,Geneva,Helvetica,sans-serif;}
div#wrap{height:100%;width:100%;}
div#ft{position:absolute;left:0;bottom:0;z-index:1;height:50px;width:100%;}
div#fill_logo{position:absolute;top:50%;left:50%;z-index:100;margin-top:-125px;margin-left:-200px;width:400px;height:250px;background:#000 url(components/img/constructer/bg/intro_logo.png) no-repeat scroll 50% 50%;overflow:hidden;}
div.mask{float:right;background-color:#000;height:250px;font:normal normal 1px/1px Arial,Verdana,Geneva,Helvetica,sans-serif;}
img{display:none;}
a, a:link, a:active, a:focus, a:hover, a:visited{text-decoration:none;text-transform:uppercase;color:#FFF;font-weight:bold;}
</style>
<!--_______________________________________________________________________________________________ SCRIPT LIBRARY ______________-->
<script type="text/javascript" src="components/js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="components/js/jquery-ui-1.8rc3.custom.min.js"></script>
</head>
<body>
<div id="wrap">
<?=$pics_array;?>
</div>
<div id="ft">
<div id="img_count"></div>
<a href="javascript:window.location='http://destination.file'">Skip Preloading</a>
</div>
<div id="fill_logo"> </div>
<script type="text/javascript">
// Start Running
$(function() {
// Define counter
var i = 0;
// Get number of images in document
var no_of_images = $('img').length;
// Set mask width by splitting the number of images by the container width
// round the result up to avoit getting a part of the container visible
var mask_width = Math.ceil(400 / no_of_images);
// Set percentage number and show it to the user
$('#img_count').html(no_of_images+'%');
$.extend(no_of_images);
// Add image object to document to cache it
function runMe() {
var imageObj = new Image();
imageObj.src = images[i];
$(imageObj).load(function() {
no_of_images--;
i++;
if (no_of_images === 0) {
window.location = 'http://destination.file';
} else {
// remove one mask
$('#fill_logo').children('#mask'+i).remove();
// update user info for remaining percentage
$('#img_count').html(no_of_images+'%');
}
});
}
// If there's more that one image to cache
if (no_of_images > 0) {
// Create image array
var images = [];
// set counter
i = 0;
// For each image found, add it to image[] and set a mask div over the container
$('img').each(function() {
images[i] = $(this).attr('src');
$('#fill_logo').append('<div id="mask'+i+'" class="mask" style="width:'+mask_width+'px;"> </div>');
i++;
});
// set counter
i = 0;
// For each item inside array, hide one mask div and call function "runMe"
var i = 0;
window.setInterval(function() {
runMe();
i = i == images.length ? 0 : i; // loops the interval
}, 100);
} else {
window.location = 'http://destination.file';
}
});
</script>
</body>
</html>