francisco
¿La función que escribí a continuación es suficiente para precargar imágenes en la mayoría, si no en todos, los navegadores que se usan comúnmente en la actualidad?
function preloadImage(url)
{
var img=new Image();
img.src=url;
}
Tengo una matriz de URL de imágenes que recorro y llamo al preloadImage función para cada URL.
Huzi — Javiator
Si. Esto debería funcionar en todos los principales navegadores.
Nota del moderador: Deje de marcar esto como “no es una respuesta”. Es, de hecho, una respuesta directa a la pregunta que se hizo. Si cree que la respuesta es incorrecta o no está suficientemente respaldada con evidencia, entonces voto negativo eso.
– Cody gris
♦
20 de marzo de 2019 a las 7:29
clintgh
Prueba esto, creo que esto es mejor.
var images = [];
function preload() {
for (var i = 0; i < arguments.length; i++) {
images[i] = new Image();
images[i].src = preload.arguments[i];
}
}
//-- usage --//
preload(
"http://domain.tld/gallery/image-001.jpg",
"http://domain.tld/gallery/image-002.jpg",
"http://domain.tld/gallery/image-003.jpg"
)
Fuente: http://perishablepress.com/3-ways-preload-images-css-javascript-ajax/
no hay onload controlador para cualquiera de las imágenes
– Benny Ruiseñor
27 de julio de 2015 a las 18:22
¿Podría explicar por qué esto es mejor?
– JJJ
29 de enero de 2016 a las 15:09
@BeNice Creo que está malinterpretando, la carga de imágenes es asíncrona, por lo tanto, debe manejar el onload estado o simplemente está creando instancias de imágenes en la memoria.
– Benny Ruiseñor
31/03/2016 a las 15:35
Si usa esta solución, no olvide la instrucción var para la variable i. De lo contrario, se configurará globalmente, lo que puede causar errores que son realmente difíciles de resolver (a menos que sepa que olvidó la instrucción var. for (var i = 0.....
– Mohammer
13 de junio de 2016 a las 23:37
@Mohammer gracias por esto, acabo de copiar el código del enlace que proporcioné. Editaré el código ahora para agregar el var
– clintgh
14 de junio de 2016 a las 2:55
Alejandro
En mi caso, fue útil agregar una devolución de llamada a su función para onload evento:
function preloadImage(url, callback)
{
var img=new Image();
img.src=url;
img.onload = callback;
}
Y luego envuélvalo para el caso de una matriz de URL a imágenes que se precargarán con devolución de llamada en todo lo que se hace:
https://jsfiddle.net/4r0Luoy7/
function preloadImages(urls, allImagesLoadedCallback){
var loadedCounter = 0;
var toBeLoadedNumber = urls.length;
urls.forEach(function(url){
preloadImage(url, function(){
loadedCounter++;
console.log('Number of loaded images: ' + loadedCounter);
if(loadedCounter == toBeLoadedNumber){
allImagesLoadedCallback();
}
});
});
function preloadImage(url, anImageLoadedCallback){
var img = new Image();
img.onload = anImageLoadedCallback;
img.src = url;
}
}
// Let's call it:
preloadImages([
'//upload.wikimedia.org/wikipedia/commons/d/da/Internet2.jpg',
'//www.csee.umbc.edu/wp-content/uploads/2011/08/www.jpg'
], function(){
console.log('All images were loaded');
});
Puede mover este código a index.html para precargar imágenes desde cualquier URL
<link rel="preload" href="https://via.placeholder.com/160" as="image">
mplungjan
Alternativa CSS2: http://www.thecssninja.com/css/even-better-image-preloading-with-css2
body:after {
content: url(img01.jpg) url(img02.jpg) url(img03.jpg);
display: none;
}
Alternativa CSS3: https://perishablepress.com/preload-images-css3/
(Presa H/T Linh)
.preload-images {
display: none;
width: 0;
height: 0;
background: url(img01.jpg),
url(img02.jpg),
url(img03.jpg);
}
NOTA: Imágenes en un contenedor con display:none podría no precargarse. Quizás la visibilidad: oculta funcione mejor, pero no lo he probado. Gracias Marco Del Valle por señalar esto.
Gracias mplungjan. Aunque no me ayuda con este caso en particular, es bueno saberlo.
– Francisco
6 de septiembre de 2010 a las 9:36
¿Tengo razón al decir que esto ralentizará la carga de la página porque estas imágenes deben descargarse antes de que la página pueda iniciar el evento de carga?
– jakubiszon
7 de marzo de 2015 a las 17:23
No creo que funcionen en todos los navegadores. Sé que en Chrome las imágenes no se cargan hasta que son visibles. Será necesario quitar la pantalla: ninguno; y en su lugar intente colocarlos de modo que no se puedan ver. Luego puede ocultarse con JS después de que todo se haya cargado si es necesario.
– Bullyen
29 de diciembre de 2015 a las 16:02
Imágenes de fondo en un elemento con display: none no se precargará.
– Marquizzo
17/03/2016 a las 21:44
Este método funcionó para mí solo que yo (1) no usé display: none(2) no usó el width/height: 0(3) poner no-repeat y una posición tal que la imagen estaría fuera (-<width>px -<height>px lo llevará allí, por lo que si sus imágenes tienen una altura de 100px o menos, puede usar 0 -100pxen otras palabras url(...) no-repeat 0 -100px.
– Alexis Wilke
10 de agosto de 2016 a las 0:37
const preloadImage = src =>
new Promise(r => {
const image = new Image()
image.onload = r
image.onerror = r
image.src = src
})
// Preload an image
await preloadImage('https://picsum.photos/100/100')
// Preload a bunch of images in parallel
await Promise.all(images.map(x => preloadImage(x.src)))
Gracias mplungjan. Aunque no me ayuda con este caso en particular, es bueno saberlo.
– Francisco
6 de septiembre de 2010 a las 9:36
¿Tengo razón al decir que esto ralentizará la carga de la página porque estas imágenes deben descargarse antes de que la página pueda iniciar el evento de carga?
– jakubiszon
7 de marzo de 2015 a las 17:23
No creo que funcionen en todos los navegadores. Sé que en Chrome las imágenes no se cargan hasta que son visibles. Será necesario quitar la pantalla: ninguno; y en su lugar intente colocarlos de modo que no se puedan ver. Luego puede ocultarse con JS después de que todo se haya cargado si es necesario.
– Bullyen
29 de diciembre de 2015 a las 16:02
Imágenes de fondo en un elemento con display: none no se precargará.
– Marquizzo
17/03/2016 a las 21:44
Este método funcionó para mí solo que yo (1) no usé display: none(2) no usó el width/height: 0(3) poner no-repeat y una posición tal que la imagen estaría fuera (-<width>px -<height>px lo llevará allí, por lo que si sus imágenes tienen una altura de 100px o menos, puede usar 0 -100pxen otras palabras url(...) no-repeat 0 -100px.
– Alexis Wilke
10 de agosto de 2016 a las 0:37
dave
Te recomiendo que uses una prueba/captura para evitar algunos posibles problemas:
OOP:
var preloadImage = function (url) {
try {
var _img = new Image();
_img.src = url;
} catch (e) { }
}
Estándar:
function preloadImage (url) {
try {
var _img = new Image();
_img.src = url;
} catch (e) { }
}
Además, aunque me encanta DOM, los viejos navegadores estúpidos pueden tener problemas con el uso de DOM, así que evítelo por completo en mi humilde opinión, contrario a la contribución de freedev. Image() tiene un mejor soporte en los antiguos navegadores de basura.
No creo que esta sea la forma en que detecta errores al cargar una imagen en javascript: hay algo como _img.onerror que puede (¿debería?) usarse.
– Greg0ry
23 de septiembre de 2015 a las 8:57
¿Qué son los “posibles problemas”?
– Kissaki
25 de abril de 2017 a las 16:37
Problemas como el soporte para el comando. Visite el sitio “puedo usar” para ver si un navegador que debe admitir tiene soporte para un comando javascript.
– Dave
26 de enero de 2018 a las 14:44
@Dave, sé que es antiguo, pero agrega esta información a tu respuesta ^^
– Toni Michel Caubet
14 oct 2020 a las 20:08
Tenga en cuenta que algunos (¿todos?) navegadores publicarán la imagen después de unos segundos si no la ha usado. Para evitar esto, mantenga una referencia a la
imgobjeto, por ejemplo, en una matriz en el ámbito principal.– Tamlyn
13 de octubre de 2014 a las 13:14
¿Qué quieres decir con “liberar la imagen”? Si el navegador lo almacenó en caché, permanecerá allí, ¿verdad?
– Francisco
17/10/2014 a las 19:07
Un poco más corto:
(new Image()).src = url;– e382df99a7950919789725ceeec126
23/10/2014 a las 10:56
tenga en cuenta que esto no funcionará cuando chrome devtool esté abierto y ‘deshabilitar chache’ esté habilitado dentro del panel de red
– 牛さん
24 de enero de 2017 a las 4:11
Aún más corto:
new Image().src = url;– Daniel X Moore
5 de diciembre de 2017 a las 17:29