Nie ładuj obrazów w ukrytych elementach

Question

To jest nie jest duplikatem z this, ponieważ używa również podejścia document.ready, które oczywiście nie działa.

Chcę uniknąć tego, że przeglądarka ładuje obrazy (<img>) zagnieżdżone w ukrytych elementach <div>.

Próbowałem tego, jednak javascript jest wykonywany zbyt późno, przeglądarka zaczyna już pobierać obrazy, które nie powinny.

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

Czy istnieje dobre rozwiązanie javascript dla tego? Czy muszę użyć <img srctmp="...."/>, a następnie zastąpić srctmp przez src przez javascript dla obrazów, które NIE są zagnieżdżone w ukrytym <div>?

Answer 1

Można użyć atrybutu data zamiast src, ładunki przeglądarka zdjęć tworzą tylko src, więc można zacząć data-src dla każdego zdjęcia, a następnie dodać src tylko do widocznych nich.

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")); 
     }); 
    }); 
    });