jQuery Wie erhalten Sie ein Bild, das bei Belastung eingeblendet wird?

Alles, was ich tun möchte, ist mein Logo beim Laden der Seite verblassen. Ich bin heute neu bei jQuery und kann es nicht schaffen, auf Last zu laden bitte helfen. Entschuldigung, wenn diese Frage bereits beantwortet wurde Ich habe es mir angesehen und versucht, andere Antworten für verschiedene Fragen anzupassen, aber nichts scheint zu funktionieren und es beginnt mich zu frustrieren.jQuery Wie erhalten Sie ein Bild, das bei Belastung eingeblendet wird?

Danke.

Code:

<script type="text/javascript">           
$(function() { 
.load(function() { 
     // set the image hidden by default  
     $('#logo').hide();.fadeIn(3000); 
           }}      
</script>     
    <link rel="stylesheet" href="challenge.css"/> 
<title>Acme Widgets</title>   
    </head>  
    <body> 
    <div id="wrapper"> 
    <div id="header"> 
    <img id="logo" src="logo-smaller.jpg" /> 
    </div> 
     <div id="nav"> 
     navigation 
    </div> 
     <div id="leftCol"> 
     left col 
    </div> 
     <div id="rightCol"> 
     <div id="header2"> 
     header 2 
     </div> 
     <div id="centreCol"> 
     body text 
     </div> 
     <div id="rightCol2"> 
     right col 
     </div> 
    </div> 
    <div id="footer"> 
    footer 
    </div> 
    </div> 
    </body> 
</html>

Quelle

2009-09-05 Cool Hand Luke UK

-3

Ich finde die Antwort! Sie müssen die window.onload-Funktion wie unten gezeigt verwenden. Danke an Tec guy und Karim für die Hilfe. Hinweis: Sie müssen weiterhin die Dokumentbereitschaftsfunktion verwenden.

window.onload = function() {$('#logo').hide().fadeIn(3000);}; 
$(function() {$("#div").load(function() {$('#div').hide().fadeIn(750););

Es ist auch für mich gearbeitet, wenn direkt nach dem Bild platziert ... Danke

Quelle

2009-09-06 14:39:36

Sie sollten nicht einstellen .onload, wenn Sie jQuery verwenden –

Dies ist kein richtiger JQuery-Code – tugberk

Sie haben einen Syntaxfehler in Zeile 5:

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

werden sollten:

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

Quelle

2009-09-05 17:51:44

Es gibt tatsächlich eine Reihe von Fehlern im JavaScript. –

lol. Sie haben den absichtlich kopierten Fehler behoben, und jetzt sind beide Zeilen identisch. Das passiert, wenn du ein Jahr später zurückkommst. – Wiseguy

Zum ersten Mal habe ich etwas auf SO bearbeitet und absichtlich einen Fehler hinzugefügt :) –

Setzen Sie einfach den Stil des Logo display:hidden und fadeIn nennen, anstatt zuerst zu rufen hide:

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

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

Quelle

2009-09-05 17:51:53 karim79

Immer noch kann es nicht zur Arbeit! :( –

@Cool Hand Luke UK - haben Sie versucht @Traveling Tech Guy's Lösung? – karim79

Bitte beachten Sie meinen Hinweis auf das Dokument bereit Problem mit dieser Frage - es ist eine ziemlich wichtige Unterscheidung. – Fenton

window.onload nicht so vertrauenswürdig ist .. würde ich verwenden:

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

Quelle

2010-01-11 01:54:05

Bitte beachten Sie meine Anmerkung zum Dokument bereit Problem mit dieser Frage - es ist eine ziemlich wichtige Unterscheidung – Fenton

Warum halten Sie window.onload für nicht vertrauenswürdig ? –

Dokument bereit ist nicht richtig für diese Funktion, es wartet, bis die Bilder geladen werden, verbirgt sie und sie blendet sie, die eher hässlich ist – Blowsie

Dieser Thread scheint unnötig umstritten.

Wenn Sie diese Frage mit jQuery wirklich richtig lösen möchten, lesen Sie bitte die folgende Lösung.

Die Frage ist "jQuery Wie erhalten Sie ein Bild bei Belastung einblendet?"

Zuerst eine kurze Notiz.

Dies ist kein guter Kandidat für $ (document) .ready ...

Warum? Weil das Dokument fertig ist, wenn das HTML-DOM geladen ist. Das Logo-Bild ist zu diesem Zeitpunkt noch nicht fertig - es kann tatsächlich heruntergeladen werden!

So zuerst die allgemeine Frage zu beantworten "jQuery Wie erhalten Sie ein Bild bei Belastung einblendet?" - Das Bild in diesem Beispiel hat ein ID = "logo" -Attribut:

Dies tut genau das, was die Frage stellt. Wenn das Bild geladen ist, wird es eingeblendet. Wenn Sie die Quelle des Bildes ändern, wird die neue Quelle eingeblendet, sobald sie geladen ist.

Es gibt einen Kommentar zur Verwendung von window.onload neben jQuery. Das ist perfekt möglich. Es klappt. Es kann getan werden. Das Ereignis window.onload muss jedoch besonders sorgfältig behandelt werden. Dies liegt daran, dass Sie Ihre vorherigen Ereignisse überschreiben, wenn Sie sie mehrmals verwenden. Beispiel (zögern Sie es nicht ...).

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

Natürlich hätten Sie nicht drei Onload-Ereignisse in Ihrem Code so dicht beieinander. Sie hätten höchstwahrscheinlich ein Skript, das etwas onload macht, und fügen dann Ihren window.onload-Handler hinzu, um Ihr Bild einzublenden - "Warum funktioniert meine Diashow nicht mehr !!?" - Wegen des window.onload Problems.

Ein großartiges Feature von jQuery ist, dass wenn Sie Ereignisse mit jQuery binden, sie alle hinzugefügt werden.

Also da hast du es - die Frage wurde bereits als beantwortet markiert, aber die Antwort scheint auf Grund all der Kommentare nicht ausreichend zu sein. Ich hoffe, das hilft jedem, der von den Suchmaschinen der Welt kommt!

Quelle

2010-03-26 20:39:56 Fenton

$ ("# logo"). Bind ("laden", funktion() {$ (this) .fadeIn();}); hat nicht an mir gearbeitet. Ich habe es in nichts eingepackt, einfach in

Ich versuchte das folgende, aber hat nicht funktioniert;

<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 das folgende funktionierte gerade gut;

<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>

Quelle

2011-02-19 10:37:00 tugberk

Wie erwähnt Söhne, aber ich würde hinzufügen:

$("img").hide(); 

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

oder:

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

Quelle

2011-04-05 22:06:59

Der Schlüssel ist, verwenden $(window).load(function(){}, so dass wir das Bild geladen wird. Blenden Sie das Bild über die CSS-Funktion verblassen sie dann bei der Verwendung fadeIn:

$(function() { 

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

});

Idee aus: http://www.getpeel.com/

Quelle

2011-05-09 16:19:40 BlissOfBeing

Um dies zu tun, mit mehreren Bildern, die Sie allerdings eine .each() Funktion ausführen müssen. Das funktioniert, aber ich bin mir nicht sicher, wie effizient es ist.

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

Quelle

2011-11-06 22:49:22 Craig

Dadurch werden N Ereignisbehandlungsroutinen erstellt, eine für jedes Bild, die * möglicherweise * nicht sehr effizient ist. Ein besserer Weg wäre, einen Event-Handler zu haben, dem alle betroffenen Elemente zugewiesen sind, der bestimmen kann, was den Onload verursacht: '$ ('img'). Load (function (event) {$ (event.target) .fadeIn() ;}); ' –

CSS3 + jQuery Lösung

wollte ich eine Lösung, die jQuery hat keinen Fade-Effekt verwenden, da diese Verzögerung verursacht in vielen mobilen Geräten.

Ausleihen von Steve Fenton's answer Ich habe eine Version davon angepasst, die das Bild mit der CSS3-Übergangseigenschaft und Opazität verblasst. Dies berücksichtigt auch das Problem des Browser-Caching. In diesem Fall wird das Bild nicht mit CSS angezeigt.

Hier ist mein Code und working fiddle:

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

Was hier passiert, ist das Bild (oder ein Element), das Sie einblenden möchten, wenn es geladen wird, muss zuvor die .fade-in-on-load Klasse angewendet haben. Dies wird ihm eine Deckkraft von 0 zuweisen und den Übergangseffekt zuweisen, Sie können die Fade-Geschwindigkeit im CSS nach Belieben bearbeiten.

Dann wird der JS jedes Element, das die Klasse hat, durchsuchen und das load-Ereignis daran binden. Ist dies abgeschlossen, wird die Deckkraft auf 1 gesetzt und das Bild wird eingeblendet. Wenn das Bild bereits im Browser-Cache gespeichert wurde, wird es sofort eingeblendet.

Verwenden Sie dies für eine Produktlistenseite.

Dies ist vielleicht nicht die schönste Implementierung, aber es funktioniert gut.

Quelle

2014-08-25 22:26:33 gillytech

Irgendwelche Ideen, wie man das Fadein macht, finden als Sequenz statt? –

Mit Desandro's imagesloaded Plugin

1 - Bilder in CSS verstecken:

#content img { 
    display:none; 
}

2 - Einblendung von Bildern auf Belastung mit javascript:

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

Quelle

2014-09-21 12:53:47

Verwandte Themen