Estoy necesitando ayuda con este script.
Lo principal es que no quiero que se haga preload de las imágenes principales.
Lo que quiero es que al dar la orden de cambiar la imagen, se cree el objeto imagen y una vez cargada haga el cambio...
Para eso utilizo imgName.onload = cambiarimagen();
yo creo que esto es o que no me funciona bien, que en IE si se demora en cargar la imágen se tranca todo, lo que necesitaría saber es como verivicar que se cargo el objeto imagen para luego generar el pedido de que la cambie...
Envío un ejemplo de lo que hablo, si lo ven funcionar en IE se daran cuenta...
armen esta url y verán lo que les digo (no la puedo poner porque el foro no me permite)
200.40.136.20
alejandro_stendelis/prueba
default.hrml
(ojo si lo ven funcionar bien es que carga muy rápido las imágenes, intenten en hacer una imágens mas pesada y verán.
Ayudenmennnnn....
Puedo reacer todo el script si es necesario...
aca les envío el html y abajo agrego las imágenes de ejemplo
Código:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script language="javascript" type="text/javascript">
// Declaramos las variables
var its;
var browserName = '';
var browserNameLong = '';
var browserNew = '';
var preloadFlag = false;
var Macintosh = navigator.userAgent.indexOf('Mac')>0;
// Verificamos version, agente, plataforma y nombre
function its() {
var n = navigator;
var ua = ' ' + n.userAgent.toLowerCase();
var pl = n.platform.toLowerCase();
var an = n.appName.toLowerCase();
this.version = n.appVersion;
this.nn = ua.indexOf('mozilla') > 0;
if(ua.indexOf('compatible') > 0) {
this.nn = false;
}
this.opera = ua.indexOf('opera') > 0;
this.ie = ua.indexOf('msie') > 0;
this.major = parseInt( this.version );
this.minor = parseFloat( this.version );
this.mac = ua.indexOf('mac') > 0;
this.win = ua.indexOf('win') > 0;
if(this.ie) {
if(ua.indexOf("msie 5") > 1) {
var msieIndex = navigator.appVersion.indexOf("MSIE") + 5;
this.major = parseFloat(navigator.appVersion.substr(msieIndex,3));
}
}
return this;
}
// Declaramos las variables de navegador
function browserNaming() {
its = new its();
if (!document.getElementById) {
browserNew = false;
}
else {
browserNew = true;
}
if (its.opera) {
browserName = "Opera";
}
else if (its.ie) {
browserName = "IE";
}
else {
browserName = "NS";
}
browserNameLong = browserName + its.major;
}
// Función crear objetos imágen
function createObject(imgName,imgSrc) {
if (loadingFlag) {
eval(imgName + ' = new Image()');
eval(imgName + '.src = "' + imgSrc + '"');
return imgName;
}
}
// Función cambiar imágen
function changeImage(layer,imgName,imgObj) {
if (preloadFlag) {
if (browserNew) {
document.getElementById(imgName).src = eval(imgObj+'.src');
}
if ((!browserNew) && (browserName == "NS") && (layer!=null)) {
eval('document.'+layer+'.document.images["'+imgName+'"].src = '+imgObj+'.src');
}
else {
document.images[imgName].src = eval(imgObj+'.src');
}
}
}
// Función cambiar texto en layer
function rewriteTextLayer(txt,id) {
txt += "\n";
if (browserNew && browserName == "NS") {
botOver = document.getElementById(id);
range = document.createRange();
range.setStartBefore(botOver);
domfrag = range.createContextualFragment(txt);
while (botOver.hasChildNodes()) {
botOver.removeChild(botOver.lastChild);
}
botOver.appendChild(domfrag);
}
else {
document.all[id].innerHTML = txt;
}
}
// Chequea el navegador
browserNaming();
// pone true para poder crear objetos imágenes
loadingFlag = true;
//setea variables por defecto
var arrdef = 0
var derdef = 0
//*****
// Comienza código de carga de imágenes
//*****
//Carga imagenes derecha
der = new Array();
der = "azu;;ver";
der = der.split(';;');
//Arma los objetos de imagen derecha -----> ej: der_azu_on, der_azu_off
for(x=0;x<der.length;x++) {
createObject('der_' + der[x] + '_on' ,'der_' + der[x] + '_on.gif');
createObject('der_' + der[x] + '_off','der_' + der[x] + '_off.gif');
}
//Carga imagenes arr
arr = new Array();
arr = "ama;;nar;;roj";
arr = arr.split(';;');
//Arma los objetos de imagen arr -----> ej: arr_ama_on, arr_nar_on, arr_roj_on
for(x=0;x<arr.length;x++) {
createObject('arr_' + arr[x] + '_on' ,'arr_' + arr[x] + '_on.gif');
createObject('arr_' + arr[x] + '_off','arr_' + arr[x] + '_off.gif');
}
//Carga imagenes pie
pie = new Array();
pie = "ama;;nar;;roj";
pie = pie.split(';;');
//Arma los objetos de imagen pie -----> ej: pie_ama, pie_nar
for(x=0;x<pie.length;x++) {
createObject('pie_' + pie[x], 'pie_' + pie[x] + '.gif');
}
loadingFlag = false;
preloadFlag = true;
//Carga textos pie
tex = new Array();
tex = "Imagen amarilla;;imagen naranja;;imagen roja";
tex = tex.split(';;');
// Función cambiar imagen arriba
function cambiararr(num) {
// cambia imagen arr a off
changeImage('','arr_' + arrdef,'arr_' + arr[arrdef] + '_off');
// cambia arr activo
arrdef = num;
// cambia imagen dia a on
changeImage('','arr_' + arrdef,'arr_' + arr[arrdef] + '_on');
// CAMBIA MIMAGENS SEGUN VARIABLES
cargarimagen(arrdef,derdef);
}
// Función cambiar imagen arriba
function cambiarder(num) {
// cambia imagen arr a off
changeImage('','der_' + derdef,'der_' + der[derdef] + '_off');
// cambia arr activo
derdef = num;
// cambia imagen dia a on
changeImage('','der_' + derdef,'der_' + der[derdef] + '_on');
// CAMBIA MIMAGENS SEGUN VARIABLES
cargarimagen();
}
// Función cambiar imagen
function cargarimagen() {
//carga objetos imagenes
imgName = 'img_' + arr[arrdef] + '_' + der[derdef]
imgSrc = 'img_' + arr[arrdef] + '_' + der[derdef] + '.gif'
loadingFlag = true;
createObject(imgName,imgSrc);
imgName.onload = cambiarimagen();
loadingFlag = false;
}
// Función cambiar mapa
function cambiarimagen() {
// CAMBIA MAPA SEGUN VARIABLES, TITULO Y KEY
changeImage('','pie','pie_' + arr[arrdef]);
changeImage('','img','img_' + arr[arrdef] + '_' + der[derdef]);
rewriteTextLayer(tex[arrdef],'txtlayer')
}
//inicia imagenes por defecto al inicio
function loaddef() {
cambiararr(arrdef);
cambiarder(derdef);
}
</script>
</head>
<body onload="loaddef();">
<table width="300" border="0" cellspacing="10">
<tr>
<td align="left" valign="top"><a href="javascript:;" onClick="cambiararr(0);"><img src="arr_ama_off.gif" name="arr_0" width="50" height="50" border="0" id="arr_0" /></a></td>
<td align="left" valign="top"><a href="javascript:;" onClick="cambiararr(1);"><img src="arr_nar_off.gif" name="arr_1" width="50" height="50" border="0" id="arr_1" /></a></td>
<td align="left" valign="top"><a href="javascript:;" onClick="cambiararr(2);"><img src="arr_roj_off.gif" name="arr_2" width="50" height="50" border="0" id="arr_2" /></a></td>
<td align="left" valign="top"> </td>
</tr>
<tr>
<td colspan="3" rowspan="2" align="left" valign="top"><img src="img_inicio.gif" name="img" width="200" height="200" id="img" /></td>
<td align="left" valign="top"><a href="javascript:;" onClick="cambiarder(0);"><img src="der_azu_off.gif" name="der_0" width="100" height="100" border="0" id="der_0" /></a></td>
</tr>
<tr>
<td align="left" valign="top"><a href="javascript:;" onClick="cambiarder(1);"><img src="der_ver_off.gif" name="der_1" width="100" height="100" border="0" id="der_1" /></a></td>
</tr>
<tr>
<td colspan="3" align="left" valign="top"><img src="pie_inicio.gif" name="pie" width="200" height="50" id="pie" /></td>
<td align="left" valign="top"><span id="txtlayer">Imagen inicio </span></td>
</tr>
</table>
</body>
</html>
Para descargar las imágenes entren en
200.40.136.20
carpeta alejandro_stendelis/prueba
y los nombres de las imágenes son
arr_ama_off.gif
arr_ama_on.gif
arr_nar_off.gif
arr_nar_on.gif
arr_roj_off.gif
arr_roj_on.gif
der_azu_off.gif
der_azu_on.gif
der_ver_off.gif
der_ver_on.gif
img_inicio.gif
pie_inicio.gif
pie_ama.gif
pie_nar.gif
pie_roj.gif
img_ama_azu.gif
img_ama_ver.gif
img_nar_azu.gif
img_nar_ver.gif
img_roj_azu.gif
img_roj_ver.gif
