Cómo evitar las restricciones de recursos de imágenes de Safari móvil
Este artículo está traducido de "Cómo evitar las restricciones de recursos de imágenes en Safari móvil", escrito originalmente el 25 de octubre de 2010. Es posible que ya no se apliquen ciertas restricciones.
Este artículo se traduce como un apéndice de "Lectura del código fuente de Zepto del módulo de activos". "Lectura del código fuente de Zepto del módulo de activos" es una serie de artículos sobre la lectura del código fuente de Zepto. que se ha publicado en github en, bienvenido a protagonizar: Reading-zepto
Inicio del artículo:
Debido a la memoria limitada disponible en iPads y Iphones, la versión móvil de Safari es más limitado que la versión de escritorio. Uno de ellos es la cantidad total de datos de imagen por página HTML. Cuando Safari en un dispositivo móvil carga de 8 a 10 MB de datos de imágenes, deja de cargar otras imágenes y el navegador puede incluso fallar.
La mayoría de los sitios web no se verán afectados por este límite, ya que normalmente es aconsejable mantener un tamaño de página razonable.
Pero en algunos escenarios de aplicaciones, como grandes galerías de fotos y presentaciones de diapositivas, o aplicaciones web que cargan nuevos datos de forma asincrónica, es posible que tengas problemas, como simular animaciones locales al cambiar entre diferentes secciones (Sí, Puede usar Safari móvil para simular el efecto de cambio de Flipboard).
Hay buenas razones para creer que puedes deshacerte de esta limitación simplemente eliminando los elementos de la imagen que ya no son necesarios:
var img = document.getElementById('previous' ) ;
img.parentNode.removeChild( img); Pero esto no funciona porque por alguna razón cuando eliminas la imagen (o el elemento que contiene la imagen) del DOM, los datos reales del DOM. imagen No publicada. ¡Esto es realmente un dolor de cabeza!
Establecer el atributo src de la imagen como un enlace a otra imagen (más pequeña) resolvió el problema.
var img = document.getElementById('previous');
img.src = 'images/empty.gif'; Reemplazar el atributo src finalmente libera los datos de la imagen anterior.
He probado completamente este método y es necesario tener en cuenta los siguientes puntos:
Después de configurar el atributo src en otra imagen, los datos de la imagen no se publicarán inmediatamente y el recolector de basura La memoria tarda un poco en liberarse. Esto significa que aún puedes tener problemas si insertas demasiados bloques de imágenes.
Cuando Safari activa la limitación en dispositivos móviles, Safari no cargará más imágenes, incluso al cambiar a otra página, incluso si se eliminan algunos o todos los datos cargados. Esto significa que necesitarás reiniciar Safari con frecuencia cuando pruebes esta técnica (lo que casi me vuelve loco).
Si desea eliminar un elemento de imagen del DOM, también debe asegurarse de que el elemento no pueda ser recolectado como basura antes de cambiar src; de lo contrario, los datos de la imagen anterior no se liberarán. src = 'data:image/ gif;base64,' +
'R0lGODlhAQABABAAD/ACwAAAAAAQBAAACADs=';
window.timeout(function() {img = null;
}, 60000); Como puede ver, utilicé un URI de datos como imagen de reemplazo.
(Si solo elimina el elemento de imagen, el iPad dejará de cargarse después de cargar 8 imágenes; si usa el complemento de activos de Zepto, continuará cargándose)
(Si Si solo elimina el elemento de imagen, el iPad dejará de cargar después de 8 imágenes.
Después de explicarle esta tecnología a Thomas Fuchs la semana pasada, inmediatamente la añadió a Zepto. Este fin de semana, proporcioné una función de prueba que puedes usar para probarla tú mismo.