Jquery Eliminar imagen

Question

Mi problema general es la carga lenta de imágenes. He llegado al punto en el que estoy cargando las imágenes solo cuando están en la pantalla. Necesito eliminar las imágenes que no están en la pantalla.

pensé

$(image).removeAttr("src") 

lo haría y con razón elimina src, pero no borra la imagen de la pantalla, ni reemplaza con lo que está en alt.

¿Cómo elimino la imagen? Tenga en cuenta que no quiero eliminar la etiqueta img (la necesito para más adelante), simplemente borre la imagen de la pantalla.

Otro código que puede ser relevante (aunque por qué no sé) -

updateCarImages:=> 
    imagesOnScreen = $(@el).find(".carImageClass:onScreen") 
    imagesOffScreen = _.without(cachedImagesOnScreen,imagesOnScreen) 
    for image in imagesOnScreen 
     imgSrc = $(image).attr("src") 
     if (!imgSrc) 
     id = $(image).data("tooltip-id") 
     console.log(id) 
     result = resultsStore.get(id+"") 
     console.log(result) 
     $(image).attr("src", result.get("carImageUrl")) 
    console.log(imagesOffScreen) 
    for image in imagesOffScreen 
     $(image).removeAttr("src") 

Answer 1

Si usted está tratando de borrar la memoria (que en mi opinión sería la única razón para eliminar las imágenes que no son visibles) está con ganas de un paseo.

No hay una forma a prueba de balas para obligar a un navegador a hacer eso. La única forma en que el navegador llamará al recolector de basura es para alcanzar un cierto límite de memoria, y luego indicarle al recolector qué debería tomar primero.

Mover nodos a una papelera y vaciarla se considera una buena manera:

var $trash = $('<div>').hide().appendTo('body'); 

var waste = function(node) { 
    $trash.append(node).html(''); 
} 

que podría tener suerte con el reemplazo de la fuente con un GIF vacío:

$(image).attr('src','data:image/gif;base64,R0lGODlhAQABAPABAP///wAAACH5BAEKAAAA‌​LAAAAAABAAEAAAICRAEAOw%3D%3D'); 

Esto también mantener la nodo en su lugar y ancho/alto de la imagen.

Pero dudo mucho que algo de esto resulte en un aumento del rendimiento en su caso, lo mejor es no estresar demasiado al navegador con demasiados datos.

iOS para iPad (especialmente la versión 4.x) es conocido por tener un límite de memoria bajo y se puede bloquear fácilmente si deja demasiados nodos IMG.

Answer 2

Si el problema es el rendimiento, entonces usted puede utilizar una carga perezosa plugin de jQuery preexistente. No tiene sentido reinventar la rueda.

http://www.appelsiini.net/2012/lazyload-170

---

Alternativamente, si usted no desea utilizar este plugin se podría almacenar el valor src en un atributo data-* y sólo adjuntarlo a src cuando se desea que aparezca.

Cuando ocultando:

$(image).data("src", $(image).attr("src")); 
$(image).removeAttr("src"); 
$(image).hide(); 

Cuando se muestra:

$(image).attr("src", $(image).data("src")); 
$(image).show(); 

Answer 3

Para ocultar la imagen:

$(image).hide(); 

Esto establecerá style="display:none;" en la imagen y hacer que no aparece

---

Para eliminar la imagen:

$(image).remove(); 

Esto le físicamente sacarlo de la DOM por lo que ya no existe

---

aproximación híbrida (deja la imagen en el DOM y le permite ange it later)

//Remove the SRC and hide the image 
$(image).removeAttr("src").hide(); 

//Then when you want to change to a new image 
$(image).attr("src", "iamge.gif").show(); 

Answer 4

Simplemente puede ocultar la imagen.Si no Wat para ir allí, tal vez puede crear una imagen de 1px y que:

$(image).attr('src', '1px.png'); 

Answer 5

Si desea ocultar la imagen, pero mantenerlo en su lugar, en términos de ocupar su espacio y que no afectan barras de desplazamiento de contenedores, use visibility: hidden estilo:

$(image).css('visibility', 'hidden'); 

Answer 6

Puede simplemente eliminar la imagen de este código. Lo intenté

$('.img2').dblclick(function() 
{ 
    $(".img2").removeAttr('src'); 
});