jQuery jak uzyskać obrazek, aby zniknąć przy ładowaniu?

Ten wątek wydaje się niepotrzebnie kontrowersyjny.

Jeśli naprawdę chcesz rozwiązać to pytanie poprawnie, używając jQuery, zobacz Rozwiązanie poniżej.

Pytanie brzmi: "jQuery jak sprawić, by obrazek przy ładowaniu znikał?"

To nie jest dobry kandydat na $(dokument).gotowy...

Więc najpierw odpowiem na ogólne Pytanie " jQuery jak uzyskać obrazek, aby zniknąć przy ładowaniu?"- obrazek w tym przykładzie ma atrybut id = "logo":

$("#logo").bind("load", function () { $(this).fadeIn(); });

Jest komentarz o używaniu window.onload obok jQuery. Jest to całkowicie możliwe. To działa. Można to zrobić. Jednak okno.Zdarzenie onload wymaga szczególnej troski. Dzieje się tak, ponieważ jeśli użyjesz go więcej niż jeden raz, Nadpisz poprzednie zdarzenia. Przykład (zachęcamy do wypróbowania...).

function SaySomething(words) {
    alert(words);
}
window.onload = function () { SaySomething("Hello"); };
window.onload = function () { SaySomething("Everyone"); };
window.onload = function () { SaySomething("Oh!"); };

Oczywiście, nie mielibyście w swoim kodzie trzech zdarzeń onload tak blisko siebie. Najprawdopodobniej masz skrypt, który robi coś onload, a następnie dodać swoje okno.onload handler to fade in your image - " Dlaczego mój pokaz slajdów przestał działać!!?"- z powodu okna.problem z ładowaniem.

Jeden wielki cechą jQuery jest to, że podczas wiązania zdarzeń za pomocą jQuery, wszystkie one są dodawane.

NO i proszę-pytanie zostało już oznaczone jako odpowiedź, ale odpowiedź wydaje się niewystarczająca na podstawie wszystkich komentarzy. Mam nadzieję, że pomoże to każdemu przybywającemu z światowych wyszukiwarek!

Masz błąd składni w linii 5:

$('#logo').hide();.fadeIn(3000);

Powinno być:

$('#logo').hide().fadeIn(3000);

Po prostu ustaw styl logo na display:hidden i wywołaj fadeIn, zamiast pierwszego wywołania hide:

$(document).ready(function() {
    $('#logo').fadeIn("normal");
});

<img src="logo.jpg" style="display:none"/>

Aby to zrobić z wieloma obrazami, musisz uruchomić funkcję .each(). To działa, ale nie jestem pewien, czy to jest skuteczne.

$('img').hide();
$('img').each( function(){
    $(this).on('load', function () {
        $(this).fadeIn();
    });
});

Okno.onload nie jest godny zaufania.. Użyłbym:

<script type="text/javascript">
    $(document).ready(function () {
        $('#logo').hide().fadeIn(3000);
    });
</script>

Używając przykładów z Sohnee i karim79. Przetestowałem to i działało zarówno w FF3. 6, jak i IE6.

<script type="text/javascript">
    $(document).ready(function(){
        $("#logo").bind("load", function () { $(this).fadeIn('slow'); });
    });
</script>

<img src="http://www.gimp.org/tutorials/Lite_Quickies/quintet_hst_big.jpg" id="logo" style="display:none"/>

Kluczem jest użycie $(window).load(function(){}, więc wiemy, że obraz jest załadowany. Ukryj obraz za pomocą funkcji css, a następnie zniknij za pomocą fadeIn:

$(function() {

  $(window).load(function(){
    $('#logo').css({visibility: 'visible', opacity: 0}).fadeIn(1000);
  });

});

Pomysł z: http://www.getpeel.com/

Using desandro ' s imagesloaded plugin

1-Ukryj Obrazy w css:

#content img { 
    display:none; 
}

2-fade in images on load with javascript:

var imgLoad = imagesLoaded("#content");
imgLoad.on( 'progress', function( instance, image ) {
    $(image.img).fadeIn();
});

OK więc zrobiłem to i działa. To jest w zasadzie zhakowane z różnych odpowiedzi tutaj. Ponieważ nie ma nadal jasnej odpowiedzi w tym wątku postanowiłem to zamieścić.

<script type="text/javascript">
  $(document).ready(function () {
    $("#logo").hide();
    $("#logo").bind("load", function () { $(this).fadeIn(); });
  });
</script>

To rozwiązanie pozostawia element sam w CSS, i najpierw ukrywa, a następnie zanika we wszystkich za pomocą JS. W ten sposób, jeśli JS nie działa poprawnie, element załaduje się normalnie.

Mam nadzieję, że pomoże to każdemu, kto natknie się na ten niezbyt pomocny wątek w rankingu google #1.

Jak wspomina Sohne, ale dodałbym to:

$("img").hide();

$("img").bind("load", function () { $(this).fadeIn(); });

Lub:

$("img").bind("load", function () {
 $(this).css({opacity: 0, visibility: "visible"}).animate({opacity: 1}, "slow"); 
});

[[2]}próbowałem następnego, ale nie zadziałało;

    <span style="display: none;" id="doneimg">
        <img alt="done" title="The process has been complated successfully..." src="@Url.Content("~/Content/App_Icons/icos/tick_icon.gif")" />
    </span>

    <script type="text/javascript">
        //$(document).ready(function () {
            $("#doneimg").bind("load", function () { $(this).fadeIn('slow'); });
        //});
    </script>

BU następny działał dobrze;

<script type="text/javascript">
        $(document).ready(function () {
            $('#doneimg').fadeIn("normal");
        });
</script>

            <span style="display: none;" id="doneimg">
                <img alt="done" title="The process has been complated successfully..." src="@Url.Content("~/Content/App_Icons/icos/tick_icon.gif")" />
            </span>

CSS3 + jQuery Solution

Chciałem rozwiązania, które nie wykorzystywałoby efektu zaniku jQuery, ponieważ powoduje to opóźnienia w wielu urządzeniach mobilnych.

Zapożyczenie z odpowiedź Steve ' a Fentona zaadaptowałem wersję tego, która zanika obraz z właściwością przejścia CSS3 i nieprzezroczystością. Uwzględnia to również problem buforowania przeglądarki, w którym to przypadku obraz nie pojawi się przy użyciu CSS.

Oto Mój kod i Działa :

HTML

<img src="http://placehold.it/350x150" class="fade-in-on-load">

CSS

.fade-in-on-load {
    opacity: 0;
    will-change: transition;
    transition: opacity .09s ease-out;
}

JQuery Snippet

$(".fade-in-on-load").each(function(){
    if (!this.complete) {
        $(this).bind("load", function () {
            $(this).css('opacity', '1');
        });
    } else {
        $(this).css('opacity', '1');
    }
});

To, co się tutaj dzieje, to obraz (lub dowolny element), który chcesz blaknąć podczas ładowania, będzie musiał wcześniej zastosować do niego klasę .fade-in-on-load. Spowoduje to przypisanie mu krycia 0 i przypisanie efektu przejścia, możesz edytować szybkość zanikania, aby posmakować w CSS.

Następnie JS przeszukuje każdy element, który ma klasę i powiązuje z nią Zdarzenie load. Raz gotowe, krycie zostanie ustawione na 1, a obraz zniknie. Jeśli obraz był już przechowywany w pamięci podręcznej przeglądarki, natychmiast zniknie.

Używanie tego na stronie z listą produktów.

To może nie jest najładniejsza implementacja, ale działa dobrze.