Non caricare immagini all'interno di elementi nascosti

Question

Questo è non è un duplicato di this perché utilizza anche l'approccio document.ready che ovviamente non funziona.

Desidero evitare che il browser carichi immagini (<img>) nidificate all'interno di elementi nascosti <div>.

Così ho provato, ma il javascript viene eseguito troppo tardi, il browser inizia già a scaricare le immagini che non dovrebbe.

$(document).ready(function() { 
    $('div').not(":visible").each(function() { 
     $(this).find('img').each(function() { 
     $(this).attr("src",""); 
     }); 
    }); 
    }); 

C'è una buona soluzione javascript per questo? Oppure devo usare <img srctmp="...."/> e quindi sostituire srctmp per src tramite javascript per quelle immagini che NON sono annidate all'interno di un nascosto?

Answer 1

È possibile utilizzare un attributo data invece il src, browser carica le immagini formano solo src, in modo da poter iniziare con data-src per ogni immagini e quindi aggiungere il src solo per quelle visibili.

HTML:

<img data-src="path/to/image.jpg" /> 

JS:

$(document).ready(function() { 
    $('div').is(":visible").each(function() { 
     $(this).find('img').each(function() { 
     $(this).attr("src", $(this).data("src")); 
     }); 
    }); 
    });