Wtyczka jQuery imagesLoaded do obsługi procesu ładowania zdjęć

31 December 2012 Comments

jQuery imagesLoaded to wtyczka do jQuery oferująca obsługę ładowania zdjęć. Za pomocą funkcji odpalanych po udanej lub nieudanej próbie załadowania zdjęć można odpowiednio oprogramować zachowanie się danego widżetu na naszej stronie (np. wyświetlanie zdjęć dopiero po załadowaniu całej galerii, czy wyświetlanie zastępczej treści, gdy zdjęć nie uda się załadować). Kod znajdziemy na githubie. Dostępna jest także dokumentacja wraz z przykładami.

Żeby użyć wtyczki musimy dołączyć plik jquery.imagesloaded.min.js (i co oczywiste - jquery). Następnie na selektorze trzeba użyć metody imagesLoaded. Selektor może odnosić się do jednego lub wielu zdjęć (tagów img), czy też kontenerów. Metoda ta jako argumenty przyjmuje nazwy funkcji do odpalenia dla konkretnych zdarzeń. done - po załadowaniu zdjęć, fail - po nieudanym ładowaniu zdjęć, always - niezależnie od wyniku ładowania zdjęć. Można też śledzić postęp poprzez funkcję podpiętą pod progress.

Oto prosty przykład:

<html>
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script src="jquery.imagesloaded.min.js"></script>
    <script>
        $(function() {
            $('.preload').imagesLoaded({
                'done': showImage,
            });
        });
        function showImage(images) {
            images.show();
        }
    </script>
    <style>
    .preload {
        display: none;
    }
    </style>
</head>
<body>

<img src="https://developers.google.com/_static/images/developers-logo.png" class="preload">
<img src="https://developers.google.com/_static/images/developers-logo.png" class="preload">
<img src="https://developers.google.com/_static/images/developers-logo.png" class="preload">

</body>
</html>

W tym przykładzie zdjęcia z klasą "preload" są ukryte poprzez regułę CSS. Wtyczka imagesLoaded pokaże je po ich załadowaniu.

RkBlog

Komponenty i dodatki, 31 December 2012