recorrer - tablas en javascript ejemplos
¿Cómo precargar imágenes sin Javascript? (9)
¿No puedes agregarlos como una <img /> a tu página y ocultarlos usando css?
En uno de Mis diseños hay algunas imágenes grandes (provienen de XML) que se muestran cuando muevo el mouse sobre algunos del enlace, pero cuando se carga la página y cuando se transfiere i Lleva tiempo cargar esa imagen.
Nota: hay arreglos 5 imágenes (no dinámicas)
No quiero usar JavaScript para precargar imágenes ¿Soluciones?
No estoy usando el menú desplegable o algo así, pero estas imágenes son imágenes del producto y los enlaces son enlace de texto ¿Tienes mi punto?
Como no estoy seguro de si las imágenes ocultas están cargadas, es probable que desee utilizar sprites de imagen . Entonces toda la imagen se carga antes de que se muestre algo. Incluso puede colocar todos los elementos de su menú en una imagen y, por lo tanto, guardar muchas solicitudes HTTP.
Desde http://snipplr.com/view/2122/css-image-preloader
Una técnica de baja tecnología pero útil que utiliza solo CSS. Después de colocar el css en su hoja de estilo, inserte esto justo debajo de la etiqueta del cuerpo de su página: Siempre que se haga referencia a las imágenes en sus páginas, ahora se cargarán desde el caché.
#preloadedImages
{
width: 0px;
height: 0px;
display: inline;
background-image: url(path/to/image1.png);
background-image: url(path/to/image2.png);
background-image: url(path/to/image3.png);
background-image: url(path/to/image4.png);
background-image: url();
}
HTML5 tiene una nueva forma de hacer esto, mediante la link prefetching .
<link rel="prefetch" href="http://davidwalsh.name/wp-content/themes/walshbook3/images/sprite.png" />
Simplemente agregue muchas etiquetas de link como necesite en su HTML y estará listo para comenzar. Por supuesto, los navegadores más antiguos no cargarán el contenido de esta manera.
ACTUALIZAR
Si su servidor se sirve con HTTP2, también puede agregar un encabezado de Link en su respuesta y hacer uso de HTTP2 Server Push .
Link: <http://davidwalsh.name/wp-content/themes/walshbook3/images/sprite.png>; rel=preload; as=image;
Haga referencia a sus imágenes en etiquetas img invisibles. Mientras se carga la página, también se descargarán.
No hay necesidad de precargar imágenes. No entiendo por qué el 99% de las personas piensa que los efectos de desplazamiento tienen que usar 2 imágenes. No hay tal necesidad, y usar 2 imágenes hace que se vea mal. La única buena solución que conozco es usar CSS para los elementos A (o JS fácil para todos los demás botones). Cuando el botón nos movió, coloque la posición de fondo en algún desplazamiento.
a { display:block; width:160px; height:26px; background:url(b_tagsdesc.png); }
a:hover { background-position:0 26px }
Eso es todo, la imagen utilizada se puede ver a continuación:
texto alt http://www.margonem.pl/img/b_tagsdesc.png
Editar: También puedes usarlo de otra manera. En lugar de alternar la imagen, puede ocultar su imagen. Por lo tanto, el punto de inicio sería "background-position: 0 -100px" y en "0 0".
Esta técnica se llama sprites CSS: aquí hay una buena descripción de ella: http://css-tricks.com/css-sprites/
Podrías usar un div oculto para poner imágenes. Así.
<html>
<body>
<div style="width:1px; height:1px; visibility:hidden; overflow:hidden">
<img src="img1.jpg" /><img src="img2.jpg" />
</div>
<div>Some html</div>
</body>
</html>
Esto solo funciona para imágenes sin embargo, es decir. Si intentas hacer lo mismo con los archivos .swf, por ejemplo, habrá problemas. Firefox no ejecuta el archivo .swf si no está visible.
Si lo que busca es precargar imágenes, entonces el rendimiento es lo que desea. Dudo que bloquear la página mientras la carga de recursos sea lo que quieres. Por lo tanto, solo coloque algunos enlaces de captación previa al final del cuerpo y agrégueles los medios falsos para que parezcan poco importantes (para que se carguen después de todo lo demás). Luego, agregue la etiqueta onload a esos enlaces, y en esa carga estará el código que establece la fuente del recurso real en su página. Por ejemplo, esto podría incluso ser usado en conjunto con iframes dinámicos.
Antes de:
<a onclick="myFrame.style.opacity=1-myFrame.style.opacity;myFrame.src=''http://jquery.com/''">
Click here to toggle it
</a><br />
<iframe id="myFrame" src="" style="opacity: 0"></iframe>
Después:
<a onclick="myFrame.style.opacity=1-myFrame.style.opacity">
Click here to toggle it
</a><br />
<iframe id="myFrame" src="" style="opacity: 0"></iframe>
<link rel="prefetch" href="http://jquery.com/"
onload="myFrame.src=this.href" media="bogus" />
Observe cómo el primero (antes) congela la página y parpadea de una manera bastante fea, mientras que el segundo (después) con el contenido precargado no congela la página o parpadea, sino que aparece y desaparece de manera instantánea.
Una técnica que no vi mencionada aquí todavía, que funciona bien si no necesita preocuparse por IE6 y 7, es usar el :after pseudo-selector para agregar sus imágenes como content a un elemento de la página. Código abajo levantado de este artículo :
body:after {
content: url(img01.jpg) url(img02.jpg) url(img03.jpg);
display: none;
}
El único inconveniente que puedo ver en comparación con el uso de JavaScript para precargar las imágenes es que no hay una forma fácil de liberarlas de la memoria.