✔ Bilder per jQuery laden

G

GottiRhg

Mitglied
Hallo zusammen,
ich sitze derzeit an einem, für mich, kniffeligen Problem.
Ich habe eine Seite mit einer Tabelle. In jeder Tabellenzeile ist neben viel Text auch ein Bild.
Ich möchte nun, wenn die Seite aufgerufen wird, die Bilder per jQuery laden, so dass sie erst angezeigt werden, wenn sie komplett geladen wurden.
Bisher versuchte ich es über $.get() zu realisieren. Hier wird der Request an eine Seite geschickt, die mir den kompletten img-Tag zusammenbaut. Da hier aber nicht geprüft wird, ob das Bild auch wirklich komplett geladen wurde, erfüllt das leider nicht meinen Zweck.
Hat jemand eine Idee?
Danke im voraus!
 
Moin,

das geht eigentlich recht einfach :)
wenn ein Bild fertiggeladen wurde, feuert darin der onload-Event.

Du könntest die Bilder also eingangs verbergen und beim onload-Event anzeigen lassen, hier mal ein Beispiel:

Code: 
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; 
                                charset=ISO-8859-1"   />
<meta name="author"             content="doktormolle" />
<meta name="date"               content="2010-03-09" />
<title>Test</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
<!--
$('html').addClass('scripted');
//-->
</script>
<style type="text/css">
<!--
html.scripted .bilderload{visibility:hidden;}
-->
</style>
</head>
<body>
Ohne JS:<br/>
<img width="200px" src="http://doktormolle.de/px/356407_b.jpg"/><br/>
mit JS:<br/>
<img width="200px" class="bilderload" onload="$(this).css('visibility','visible')" src="http://doktormolle.de/px/356407_a.jpg"/><br/>
</body>
</html>

Zum Vergleich wird das 1. Bild nicht manipuliert, es wird zeilenweise aufgebaut(hab da mal 2 recht grosse hochgeladen, ich hoffe, man sieht den Effekt)
Das 2. wird wie beschrieben manipuliert.

Damit Leute ohne JS nicht im Dunkeln stehen, wurde so vorgegangen:

  • jQuery gibt eingangs dem <html> einen Klassennamen, so hat man einen CSS-Selektor, der nur greift, wenn JS an ist
Code: 
$('html').addClass('scripted');
  • über diesen Selektor werden die Bilder dann versteckt
Code: 
html.scripted .bilderload{visibility:hidden;}
(ich gehe davon aus, dass dieser Effekt nicht bei allen Bildern erwünscht ist, daher bekommen diese eine eigene Klasse ...hier bilderload)
  • In allen betreffenden Bildern muss nun nur dies eingefügt werden:
Code: 
class="bilderload" onload="$(this).css('visibility','visible')"
  • feddisch :-)
 
Hallo, super Erklärung!

Ich spiel auch gerade mit dieser Funktion rum und probier gerade folgendes:
Code: 
<div class="loadimg">
<img src="/grafik/load.gif" width="32" height="32" alt="Bild wird geladen..." />
</div>

<img src="upload/bildxyz.jpg" class="bilderload" onload="$(this).css('visibility','visible'); $("div.loadimg").hide();" width="740" height="490" style="margin-top: 5px;" alt="Foto" />

Ziel ist es dass das div.loadimg verschwindet wenn das Bild fertig geladen ist.
Nur wollen meine Tests nicht so wie ich.

Code: 
onload="$(this).css('visibility','visible'); $("div.loadimg").hide();"

Über einen Tipp wäre ich sehr Dankbar.
Gruß Ragey
 
Zuletzt bearbeitet:
Hat sich soeben erledigt.

Falls mal jemand was ähnliches vor hat:

Code: 
onload="preload()"

<script type="text/javascript">
function preload()
{
$(".bilderload").css('visibility','visible');
$("div.loadimgbb").hide();
}
</script>
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück