Jquery Rimuovi immagine

Question

Il mio problema generale è quello di caricare le immagini pigre. Sono arrivato al punto in cui sto caricando le immagini solo quando sono sullo schermo. Devo rimuovere le immagini che non sono sullo schermo.

ho pensato

$(image).removeAttr("src") 

lo farebbe e rimuove giustamente src, ma non cancella l'immagine dallo schermo, né sostituirla con ciò che è in alt.

Come faccio a rimuovere l'immagine? Nota, non voglio rimuovere il tag img (ne ho bisogno per dopo), basta cancellare l'immagine dallo schermo.

altro codice che potrebbe essere rilevante (anche se il motivo per cui non lo so) -

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

Se si sta tentando di cancellare la memoria (che come la vedo io sarebbe l'unico motivo per rimuovere le immagini che non sono visibili) si sono fino a fare un giro.

Non esiste un modo a prova di proiettile per forzare un browser a farlo. L'unico modo in cui il browser chiamerà il garbage collector è di raggiungere un certo limite di memoria, e quindi suggerire al collector cosa dovrebbe fare prima.

Spostamento di nodi a un bidone e svuotarlo è considerato un buon modo:

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

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

si potrebbe ottenere fortunati con la sostituzione della sorgente con una GIF vuoto:

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

Questo sarà anche mantenere il nodo in posizione e larghezza/altezza dell'immagine.

Ma dubito fortemente che tutto ciò comporterà un aumento delle prestazioni nel tuo caso, la cosa migliore è non sottolineare il browser con troppi dati.

iOS per iPad (in particolare la versione 4.x) è noto per avere un limite di memoria basso e può andare in crash in modo anomalo se si lasciano troppi nodi IMG in giro.

Answer 2

Se il problema è la prestazione, quindi è possibile utilizzare un carico pigro plugin jQuery preesistente. Non ha senso reinventare la ruota.

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

---

In alternativa, se non si desidera utilizzare questo plugin è possibile memorizzare il valore src in un attributo data-* e solo attaccarlo al src quando si desidera visualizzarlo.

Quando si nasconde:

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

Durante la visualizzazione:

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

Answer 3

Per nascondere l'immagine:

$(image).hide(); 

Questo imposterà style="display:none;" sull'immagine e renderlo non appare

---

Per eliminare l'immagine:

$(image).remove(); 

questo sarà fisicamente rimuoverlo dal DOM in modo che non esiste più

---

Ibrido approccio (lascia l'immagine nel DOM e consente di ch più tardi)

//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

Si può semplicemente nascondere l'immagine.Se non wat di andare lì, si può forse creare un'immagine 1px e rispetto:

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

Answer 5

Se si desidera nascondere l'immagine, ma tenerlo in posizione in termini di occupare il suo spazio e non interessano barre di scorrimento del contenitore, utilizzare visibility: hidden stile:

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

Answer 6

Si può semplicemente rimuovere l'immagine da questo codice. L'ho provato

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