The problem is that sometimes the larger image takes some time to download and there is no activity indicator and for some reason javascript has to load the whole image before it will show it...unlike just loading an image normally (without js) when the image loads from top to bottom and you can see it loading.
So what I would like to do is have the image load normally without having to preload in js.
element; the browser should load it incrementally, as desired.
I put together an example demonstrating how one might do this [1]; the code will also be posted below for future reference. It seems to work in Firefox 2 and Opera 9. Safari 3 (beta) appears to preload the full‐size image by pre‐parsing the script. Internet Explorer 7’s policy seems to be to always download the image in its entirety before displaying it; you do get a blank image placeholder in the mean time though, so all is not lost. In the process of creating some cursors, I learned something: Internet Explorer requires that cursors be 32×32 pixels; otherwise, it stretches them to those dimensions.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en-Latn">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Demo for Dream.In.Code Thread 31956</title>
<meta name="Author" content="Patrick Garies">
<meta name="Created" content="2007-08-20">
<meta name="Revised" content="2007-08-20">
<style type="text/css" media="all">
* { margin: 0; padding: 0; }
html { padding: 1em; background: white; }
img { display: block; margin: 0 auto; cursor: url(cursor%20zoom%20in.png) 5 5, url(cursor%20zoom%20in.cur), pointer; }
.fs { cursor: url(cursor%20zoom%20out.png) 5 5, url(cursor%20zoom%20out.cur), pointer; }
</style>
<!--[if IE]>
<style type="text/css" media="all">
img { cursor: url(cursor%20zoom%20in%20(ie).cur), pointer; }
.fs { cursor: url(cursor%20zoom%20out%20(ie).cur), pointer; }
</style>
<![endif]-->
</head>
<body>
<div><img class="fsw700 fsh1136" alt="" width="120" height="120" src="Calintz%20Preview.jpg"></div>
<div id="scripts">
<!--[if !IE]>-->
<script type="application/ecmascript">
var d = document;
var di = document.implementation;
if (di.hasFeature("MouseEvents", "2.0")) {
var image = d.getElementsByTagName("img")[0];
var thumbnailClass = image.getAttribute("class");
var thumbnailWidth = image.getAttribute("width");
var thumbnailHeight = image.getAttribute("height");
var thumbnailSrc = image.getAttribute("src");
function swap() {
var clone = image.cloneNode(false);
if (clone.getAttribute("src") == thumbnailSrc) {
clone.setAttribute("class", clone.getAttribute("class") + " fs");
clone.setAttribute("width", clone.getAttribute("class").match(/fsw\d+/).toString().substring(3));
clone.setAttribute("height", clone.getAttribute("class").match(/fsh\d+/).toString().substring(3));
clone.setAttribute("src", "Calintz%20Jerevinan.jpg");
}
else {
clone.setAttribute("class", thumbnailClass);
clone.setAttribute("width", thumbnailWidth);
clone.setAttribute("height", thumbnailHeight);
clone.setAttribute("src", thumbnailSrc);
}
image.parentNode.replaceChild(clone, image);
image = clone;
image.addEventListener("click", swap, false); /* Events aren’t cloned under the DOM2 Event model. */
}
image.addEventListener("click", swap, false);
}
</script>
<!--<![endif]-->
<!--[if IE]>
<script type="text/javascript">
var d = document;
var image = d.getElementsByTagName("img")[0];
var thumbnailClass = image.className;
var thumbnailWidth = image.getAttribute("width");
var thumbnailHeight = image.getAttribute("height");
var thumbnailSrc = image.getAttribute("src");
function swap() {
var clone = image.cloneNode(false);
if (clone.getAttribute("src") == thumbnailSrc) {
clone.className = clone.className + " fs";
clone.setAttribute("width", clone.className.match(/fsw\d+/).toString().substring(1));
clone.setAttribute("height", clone.className.match(/fsh\d+/).toString().substring(1));
clone.setAttribute("src", "Calintz%20Jerevinan.jpg");
}
else {
clone.className = thumbnailClass;
clone.setAttribute("width", thumbnailWidth);
clone.setAttribute("height", thumbnailHeight);
clone.setAttribute("src", thumbnailSrc);
}
image.parentNode.replaceChild(clone, image);
image = clone;
}
image.attachEvent("onclick", swap);
</script>
<![endif]-->
</div>
</body>
</html>
20 Aug, 2007 - 08:36 AM
|