Tengo una amplia galería de imágenes que me gustaría poder mostrar en dispositivos móviles sin que los navegadores se cuelguen o provoquen un desplazamiento brusco. Un montón de complementos para cargar imágenes perezosas, pero ¿hay algo por ahí para descargar las imágenes cuando no está a la vista para guardar la memoria?¿Cómo descargar la imagen cuando no está 'a la vista' para guardar la memoria?
No creo que haya ninguna manera de hacer esto. JavaScript solo contiene referencias a objetos DOM, que a su vez son administrados por el navegador. Por lo tanto, depende completamente del motor de caché de los navegadores determinar cuándo se desasignó un recurso. Y estas decisiones no se basan en si existe o no una referencia de JavaScript a este objeto, sino más bien si la página para la que se cargó el recurso sigue activa. En cualquier caso, el navegador guarda la gestión de la memoria caché automáticamente y no puede influir a través de JavaScript, ya que esto implicaría un tipo de interacción con el sistema de archivos del usuario, que en JavaScript solo está permitido en muy pocos casos con autorización explícita preocupaciones
Esta es una cita de la Ingeniería LinkedIn entrada en el blog del equipo LinkedIn for iPad: 5 techniques for smooth infinite scrolling in HTML5 que es relevante para esta pregunta:
UIWebView/Mobile Safari tienen strict limits for images. Nuestra transmisión está llena de imágenes grandes, por lo que alcanzamos los límites muy rápidamente. Una opción era usar el elemento Canvas de HTML5 para dibujar imágenes without running into memory issues. Sin embargo, descubrimos que dibujar imágenes muy grandes en el lienzo era lento, por lo que tuvimos que tomar otro enfoque: cada vez que una imagen se eliminaba lo suficiente de la pantalla, reemplazamos el atributo "src" de la etiqueta img con una imagen muy pequeña. Esto aseguró que la memoria utilizada para representar imágenes grandes se liberara periódicamente. Además, nos aseguramos de que no introdujimos el empty image src attribute bug.
La solución para reemplazar una imagen pequeña es muy simple y muy funcional, gracias por la sugerencia :) –
Este es un artículo antiguo, pero todavía útil: http://www.vargatron.com/2010/08/ipad-html5-js-memory-management/
Para la fijación de los controladores de eventos para ser avisado en un elemento de imagen que entran y salen del puerto de vista con el fin de reemplazar a su atributo src con la url img real (en visor) o la url marcador de posición (fuera de la ventana gráfica) existen estos plugins:
http://static.pixeltango.com/jQuery/Bullseye/ http://imakewebthings.com/jquery-waypoints/
Sustitución de laEl valor de 0 atributos todavía no garantiza que el navegador libere memoria, pero es una buena pista para el recolector de basura. Y, de todos modos, si la imagen no se libera de inmediato, aún estará en caché si el usuario decide regresar a ella.
Me gustaría cuestionar la eficacia de algo así. ¿Sabes * que tienes un problema de memoria y no algo más? Moreso, "descargar" las imágenes podría no borrarlas de la memoria. –
depende del enfoque. ¿Cómo se vería la galería? – Joseph