Hinzufügen spinner, während neue Bild geladen wird vollständig

Die Rolle, das Drehbuch zu ändern image.jpg mit newimage.gif und Umgekehrt, wenn auf Sie geklickt wird.

Jetzt möchte ich hinzufügen, ein spinner, während die newimage.gif Lasten.

So etwas wie auf 9gag.com/gif .

Kann mir bitte jemand helfen?

Dies ist der code:
html -

<img src="/image.jpg" id="pic" onclick="change()"/>
<a id="first" href="/newimage.gif" style="display:none;"></a>
<a id="second" href="/image.jpg" style="display:none;"></a>

javascript

function change(){
var imag = document.getElementById('pic').src;
var img = imag.slice(-3);
var img1 = document.getElementById('second').href;
var imag2 = document.getElementById('first').href;

if(img == 'gif') {
document.getElementById('pic').src=imag2;
//   here the newimage.gif changes to image.jpg 
} else {
//   here the image.jpg changes to newimage.gif
//   i think here should be the code that will display a spinner while the image.gif loads completely
document.getElementById('pic').src=img1;
}
}

InformationsquelleAutor Marian07 | 2014-01-21

9

Der einfachste Weg sein könnte, um die CSS - background-image Eigenschaft der Bilder, um ein lade-spinner-Grafik.

HTML:
```
<img src="path/to/real/image.jpg" class="loading">
```
CSS:
```
img.loading {
    background: transparent url(path/to/loading.gif) no-repeat scroll center center;
}
```
Einmal das eigentliche Bild geladen ist, es deckt den "laden", animierte GIF hintergrund Bild.

Wenn du GIFs oder JPGs gespeichert mit Progressive display, werden Sie wollen, speichern Sie diese Bilder, ohne diese option, damit das eigentliche Bild ist unsichtbar, bis das vollständige Bild heruntergeladen, sodass Ihr spinner Grafik zu zeigen, durch in der Zwischenzeit.
- Ich will etwas, dass zu überprüfen ist, wenn image.gif ist vollständig geladen, nachdem das image.jpg Holen Sie angeklickt wird und die Funktion 'ändern' beginnt.
- Hm. Ihr wechseln konnte, die "pic" - Bild den src auf eine unsichtbare GIF oder PNG, dann gelten die CSS und Klasse des IMG-Tags. Dann sofort setzen Sie den src auf das neue image.
- Ich verwende dieses Skript in eine Seite, wo viele gif-Bilder. Wenn ich wollte preload aller Bilder, die ich verwenden würde <img id="first" href="/newimage.gif" style="display:none;"/> statt <a id="first" href="/newimage.gif" style="display:none;"></a>.
InformationsquelleAutor Greg Burghardt
0

Haben Sie einen Blick auf diese: http://www.appelsiini.net/projects/lazyload.
Bilder außerhalb des Ansichtsfenster nicht geladen werden, bis der Benutzer scrollt zu Ihnen, und Sie haben die aboility, um eine kleine Bild-Platzhalter, bis es geladen ist...

Habe ich eigentlich verwendet es hier, auf eine Test-Website, die vor einiger Zeit: http://dev.thomaskile.me/?page=test-zone&Modul=Mauerwerk.

InformationsquelleAutor ThomasK

Fand ich eine Art und Weise, das problem ist nur, dass nach der image.gif geladen wird der spinner immer noch angezeigt.

if(img == 'gif') {
document.getElementById('pic').src=imag2;
//   here the newimage.gif changes back to image.jpg 
document.getElementById("spinner").style.display = "none";    
} else {
document.getElementById('pic').src=img1;

var image = new Image();
image.src = document.getElementById('second').href;

var x = image.complete;
if(x) {
document.getElementById("spinner").style.display = "none"; 
} else {
document.getElementById("spinner").style.display = "block";
}
}
}

Dies ist hier verwende ich das Skript http://www.2lol.ro/load/poze_haioase_miscatoare/20?ref=stk

InformationsquelleAutor Marian07

0

Haben Sie ausgecheckt diese Website für eine konfigurierbare spinner ohne zusätzliche Grafiken, die zugeordnet werden kann, alle dom-element ? starten /stoppen der spinner läuft darauf hinaus, 2 js-Funktion aufruft.

der code steht unter der mit-Lizenz, die minified js standalone-Datei ist 9 Kb, glue-code für die Verwendung als ein jquery-plugin zur Verfügung und es gibt eine vml-fallback für, ähm... steampunk-Browsern ;-).

ich bin nicht in Verbindung mit code oder Autor.

InformationsquelleAutor collapsar

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.