jQuery Wie bekommt man ein Bild in auf Last verblassen?
https://stackoverflow.com/questions/1383870
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianFrage
Alles, was ich will, ist zu tun verblassen mein Logo in auf der Seite geladen. Ich bin heute zu jQuery und ich kann nicht zu fadeIn auf Last bitte Hilfe verwaltet. Sorry, wenn diese Frage bereits beantwortet habe ich einen Blick habe und versuchen, andere Antworten für andere Frage anzupassen, aber nichts scheint zu arbeiten und seine Ausgänge mich zu vereiteln.
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>
Lösung 13
ich die Antwort herauszufinden! Sie müssen die window.onload Funktion verwenden, wie unten gezeigt. Dank Tec Typ und Karim für die Hilfe. Hinweis: Sie müssen noch zu Dokument-Ready-Funktion 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
Andere Tipps
Dieser Thread scheint unnötig umstritten.
Wenn Sie wirklich richtig, diese Frage lösen wollen, mit jQuery, sehen Sie bitte die Lösung unten.
Die Frage ist „jQuery Wie Sie ein Bild bekommen in auf Last verblassen?“
Zuerst wird eine kurze Notiz.
Dies ist kein guter Kandidat für $ (document) .ready ...
Warum? Da das Dokument bereit ist, wenn der HTML-DOM geladen ist. Das Logo-Bild wird an dieser Stelle nicht bereit sein - es immer noch in der Tat sein kann das Herunterladen
So wird zuerst die allgemeine Frage zu beantworten „jQuery Wie Sie ein Bild erhalten Sie in auf Last zu verblassen?“ - das Bild in diesem Beispiel hat eine id = "Logo" -Attribut:
$("#logo").bind("load", function () { $(this).fadeIn(); });
Das ist genau das, was die Frage stellt. Wenn das Bild geladen ist, wird es blendet. Wenn Sie die Quelle des Bildes ändern, wenn die neue Quelle geladen ist, wird es blendet.
Es gibt einen Kommentar über window.onload neben jQuery verwenden. Das ist durchaus möglich. Es klappt. Es kann getan werden. Allerdings muss das window.onload Ereignis ein bestimmtes Bit der Pflege. Dies liegt daran, wenn Sie es mehr als einmal, können Sie Ihre vorherigen Ereignisse überschreiben. Beispiel (fühlen Sie sich frei, es zu versuchen ...).
function SaySomething(words) {
alert(words);
}
window.onload = function () { SaySomething("Hello"); };
window.onload = function () { SaySomething("Everyone"); };
window.onload = function () { SaySomething("Oh!"); };
Natürlich würden Sie nicht drei onload Ereignisse haben so nah beieinander in Ihrem Code. Sie würden höchstwahrscheinlich ein Skript, das etwas onload tut, und dann window.onload-Handler in Ihrem Bild zu verblassen hinzufügen - „Warum hat meine Dia-Show aufgehört zu arbeiten !!?“ -. Wegen des window.onload Problems
Ein großartiges Feature von jQuery ist, dass, wenn Sie binden Ereignisse jQuery verwenden, sie alle noch hinzukommen.
So haben Sie es - die Frage bereits markiert wurde als beantwortet, aber die Antwort scheint auf der Grundlage aller Kommentare unzureichend. Ich hoffe, das jemand aus der Welt Suchmaschinen Ankunft hilft!
Sie haben einen Syntaxfehler in Zeile 5:
$('#logo').hide();.fadeIn(3000);
Sollte sein:
$('#logo').hide().fadeIn(3000);
Setzen Sie einfach den Stil des Logo display:hidden und Call fadeIn anstelle ersten Aufruf hide:
$(document).ready(function() {
$('#logo').fadeIn("normal");
});
<img src="logo.jpg" style="display:none"/>
Um dies zu tun mit mehreren Bildern, die Sie benötigen, um durch eine .each() Funktion auszuführen. Dies funktioniert, aber ich bin mir nicht sicher, wie effizient es ist.
$('img').hide();
$('img').each( function(){
$(this).on('load', function () {
$(this).fadeIn();
});
});
window.onload ist nicht so vertrauenswürdig .. Ich würde verwenden:
<script type="text/javascript">
$(document).ready(function () {
$('#logo').hide().fadeIn(3000);
});
</script>
Mit den Beispielen aus Sohnee und karim79. Getestet habe ich diese und es funktionierte in beiden FF3.6 und 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"/>
Der Schlüssel ist $(window).load(function(){} zu verwenden, so dass wir das Bild geladen wird. Blenden Sie das Bild über die CSS-Funktion dann verblassen in Verwendung fadeIn:
$(function() {
$(window).load(function(){
$('#logo').css({visibility: 'visible', opacity: 0}).fadeIn(1000);
});
});
Idee von: http://www.getpeel.com/
Mit Desandro ist imagesloaded Plugin
1 - Bilder ausblenden in CSS:
#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();
});
OK, damit ich das tat und es funktioniert. Es ist im Grunde zusammen aus verschiedenen Antworten hier gehackt. Da es STILL nicht eine klare Antwort in diesem Thread habe ich beschlossen, diese zu veröffentlichen.
<script type="text/javascript">
$(document).ready(function () {
$("#logo").hide();
$("#logo").bind("load", function () { $(this).fadeIn(); });
});
</script>
Das scheint mir der beste Weg, um darüber zu gehen. Trotz Sohnee besten Absichten gelang es ihm nicht zu erwähnen, dass das Objekt muss zuerst angezeigt werden eingestellt werden: keine mit CSS. Das Problem hierbei ist, dass, wenn für was auch immer die JS des Benutzers Grund dafür ist das Objekt nicht arbeiten wird einfach nie erscheinen. Nicht gut, vor allem wenn es das frikin' Logo.
Diese Lösung Blätter das Element allein in der CSS, und zunächst versteckt, blendet es dann in alle mit JS. Auf diese Weise, wenn JS nicht richtig funktioniert das Element genauso normal laden.
Hoffnung, dass jemand anderes hilft, die in diese Google stolpert auf Platz # 1 nicht so hilfreich Thread.
Wie erwähnt Söhne, aber ich würde hinzufügen, um dieses:
$("img").hide();
$("img").bind("load", function () { $(this).fadeIn(); });
oder:
$("img").bind("load", function () {
$(this).css({opacity: 0, visibility: "visible"}).animate({opacity: 1}, "slow");
});
Ich habe versucht, die folgenden ein, 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 die folgenden funktionierte 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>
CSS3 + jQuery Lösung
Ich wollte eine Lösung, die jQuery-Fade-Effekt verwenden nicht wie diese Ursachen in vielen mobilen Geräten hinken.
In Anlehnung an Steve Fenton Antwort ich eine Version davon angepasst haben, dass das Bild in der CSS3 Übergang Eigenschaft verblasst und Opazität. Dies berücksichtigt auch das Problem des Browser-Caching, wobei in diesem Fall wird das Bild mit Hilfe von CSS nicht angezeigt.
Hier ist mein Code und Arbeits Geige :
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 passiert hier ist das Bild (oder jedes Element), dass Sie in verblassen wollen, wenn es Lasten benötigt, die .fade-in-on-load Klasse es vorher angewandt haben. Dies wird es ein 0 Opazität zuweisen und den Übergangseffekt zuordnen, können Sie die Fade-Geschwindigkeit Geschmack im CSS bearbeiten.
Dann werden die JS jedes Element suchen, die die Klasse und bindet das Ladeereignis zu ihm hat. Ist das erledigt, wird die Opazität auf 1 gesetzt werden, und das Bild wird verblassen. Wenn das Bild bereits im Browser-Cache bereits gespeichert wurde, ist es sofort verblasst in wird.
Mit dieser für einen Eintrag Seite.
Das ist vielleicht nicht die schönste Implementierung sein, aber es funktioniert gut.
