Interrompe il caricamento delle immagini con javascript (lazyload)?

Question

Sto provando a interrompere il caricamento delle immagini con javascript su dom ready e poi avviare il caricamento ogni volta che voglio, un cosiddetto caricamento pigro delle immagini. Qualcosa del genere:

 

$(document).ready(function() { 
    var images = $('img'); 
    $.each(images, function() { 
    $(this).attr('src', ''); 
    }); 
}); 
 

Questo non funziona (testato in ff3.5, safari 3-4). Le immagini vengono caricate comunque, non capisco.

Ad esempio questo plugin, www.appelsiini.net/projects/lazyload, sta facendo esattamente la stessa cosa, rimuovendo l'attributo src al caricamento della pagina.

Cosa mi manca?

MODIFICA: Ho aggiunto una pagina di prova qui: http://dev.bolmaster2.com/dev/lazyload-test/ Prima rimuovo completamente l'attributo src, quindi dopo 5 secondi lo aggiungo con l'immagine originale. Ancora non funziona, almeno firebug dice che le immagini vengono caricate all'inizio, Firebug è fidato?

Answer 1

Penso che il problema è che stai svuotando l'attributo 'img', non 'src'.

Se si esegue il test su una pagina locale, le immagini locali potrebbero caricarsi troppo velocemente. O forse sono presi direttamente dalla cache del browser. Prova a controllare se l'immagine è già stata caricata prima di svuotare il suo 'src'.

Answer 2

provare removeAttr ("src"); come in http://www.appelsiini.net/projects/lazyload

$(document).ready(function() { 
    var images = $('img'); 
    $.each(images, function() { 
    $(this).removeAttr("src"); 
    }); 
}); 

Se ancora non funziona. Controlla questo.loaded - forse sono caricati troppo velocemente.

Answer 3

Non so se hai scritto male nella domanda ma l'attributo che dovresti impostare su una stringa vuota è "src" non "img". Prova questo:

$(document).ready(function() { 
    var images = $('img'); 
    $.each(images, function() { 
    $(this).attr('src', ''); 
    }); 
}); 

Answer 4

Credo che il problema è che si sta eseguendo il codice all'interno di $ (document) .ready, che viene chiamato quando il documento è pronto - vale a dire. quando è completamente caricato, comprese le immagini. Il plug-in LazyLoad a cui è collegato non utilizza $ (document) .ready e lo script viene inserito nell'intestazione, quindi viene eseguito prima/durante il caricamento della pagina anziché in seguito.

Answer 5

Suggerirei di utilizzare il plug-in Jquery Lazyload per questo. Fa esattamente quello che vuoi.

http://www.appelsiini.net/projects/lazyload

Answer 6

Ho avuto lo stesso problema quando mette il carico immagine sull'evento hover mia immagine miniatura, in IE provoca un "overflow dello stack" quando mi passa il mouse sulla miniatura.
Ma ora è risolto. Questo codice mi ha salvato la giornata:

$(document).ready(function() { 
    var images = $('img'); 
    $.each(images, function() { 
    $(this).removeAttr("src"); 
    }); 
}); 

Answer 7

$(document).ready(function() { 
    var images = $('img'); 
    $.each(images, function() { 
     $(this).attr('src', ''); 
    }); 
}); 

Questo non funzionerà perché jQuery viene chiamato dopo che la pagina è stata caricata in:

$(document).ready()

tutto questo codice fare sta rimuovendo il valore src dopo che l'immagine è già stata chiamata dal server.

Answer 8

Se il tuo obiettivo è impedire al server di caricare le immagini, cancellare l'attributo "src" non funzionerà quando si esegue su document.ready (almeno non sempre - prova ad scaricare l'html di pinterest per esempio e aggiungi il tuo script per l'html salvato - vedrai che il browser richiederà le immagini dal server prima dello lo src è cancellato).

Invece puoi provare a usare lo stesso codice (o meglio, senza jQuery, per assicurarti che funzioni il più velocemente possibile) inserendolo nella sezione "head" all'interno di un ciclo setInterval che cancellerà "src" attributo da tutte le immagini non appena i tag sono presenti (prima che il documento jQuery sia pronto).

Esempio:

rimuovere le immagini senza jQuery:

function removeImagesBeforeTheyAreRequested(options) { 
    var images = document.getElementsByTagName('img'); 
    for (var i = 0; i < images.length; i++) { 
    var orgSrc = images[i].src; 
    images[i].removeAttribute('src'); 
    } 
} 

fuoco questo codice nella sezione "testa", prima che il corpo è pronto (in pratica monitorare l'esistenza di tag img):

var timer = setInterval(function() { 
    removeImagesBeforeTheyAreRequested(); 
}, 1); 

smettere di provare a cercare immagini dopo 3 secondi:

setTimeout(function() { clearInterval(timer); }, 3000); 

Si noti che si potrebbe voler controllare se le immagini sono memorizzate nella cache prima di rimuovere il loro attributo "src" (quelle sarebbero caricate dal browser molto velocemente e non c'è alcun motivo per rimuovere il loro "src" allo scopo di rimuovere il carico dal server in quanto non vengono richiesti nuovamente dal server).

Answer 9

Con JavaScript lo fai in questo modo.

var imagesArray = document.querySelectorAll('img'); 

for(var i=0; i<imagesArray.length; i++) { 
    imagesArray[i].src = ''; 
} 

Considerare prima di utilizzare Javascript di Vanilla.