Olen parissa jutussa tehnyt systeemin, joka vaihtaa img-tagin scr-attribuuttia, eli lataa kuvan tilalle toisen kuvan.
Olen käyttänyt näissä joko suoraan javascriptiä (document.getElementById("kuva").src = uusi_kuva;) tai jQueryä ($("#kuva").attr("src",uusi_kuva);). Ongelma on se, että jos kuva vahdetaan esim. käyttäjän klikkauksesta, kestää kuvan lataus hetken, joka johtaa käyttäjän ihmettelyyn, kun mitään ei tapahdu heti...
Miten toteutetaan kuvan vaihto niin, että käyttäjälle näytetään latauspalluraa, joka kertoo, että jotain tapahtuu?
http://jsbin.com/uguguy/2/edit tossa on esimerkki kahen sekunnin viiveellä. Jos otat setTimeoutin tosta pois ympäriltä niin viive kestää niin pitkään ku kuvan latauskin.
Olisikohan liian simppeliä tehdä asia niin, että klikkauksen käsittelyssä ensin vaihdetaan kuvan src-määritteeksi sellainen, joka viittaa latauspallurakuvaan, ja sitten heti perään se oikea. Ja latauspallura ladataan heti sivun latautuessa valmiiksi selaimen muistiin. Tällöin ekan vaihdon pitäisi olla käytännössä välitön, toinen sitten vie sen aikaa kun vie, ja sen aikana pallura on näkyvissä. Tähän tapaan:
<script>
var palluraNimi = 'latautuu.png';
var pallura = new Image(palluraNimi);
function vaihda(kuva) {
kuva.src = palluraNimi;
kuva.src = 'http://lorempixel.com/400/800/sports';
}
</script>
– –
<img src=http://lorempixel.com/400/800/animals alt=foo onclick=vaihda(this)>Olen tuskaillut tämän kanssa nyt jonkin verran ja en vaan saa toimimaan.
Vaihe on nyt tämä:
http://jsbin.com/uvevel/2/edit
Tuo ei toimi jostain syystä ollenkaan 'Output' sarakkeessa, mutta oikean yläkulman Live preview nuolesta toimii - jotenkin...
En saa kuitenkaan hommaa toimimaan niin, että aikaa klikkaamalla näytetään tuo ajax-loader.gif ja kun kuva on valmis esitettäväksi piilotetaan taas tuo #loading elementti.
Osaako joku jeesata tämän korjauksessa?
Lataat koodissasi ensin kuvan uudelleen? Miksi? Se aiheuttaa turhan load-eventin.
Tällainen koodi toimii:
(function($) {
$.fn.changeTime = function(imgId) {
$('#loading').css("visibility","visible");
$('#image').attr('src', images[imgId]);
$('#image').on('load', function (e) {
$('#loading').css("visibility","hidden");
$('#image').off('load');
});
};
})(jQuery);Ihme purkkaa.
<?php $data = array_map(function($i) { return [ 'picture' => 'http://lorempixel.com/400/400/animals?' . $i, 'time' => date('H:i', 3600 * 18 + 300 * $i) ]; }, range(0, 9)); ?> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Throbber Test</title> <meta charset="UTF-8"/> <style> #frame { width: 400px; height: 400px; background: url('https://www.groksolutions.com/grok/static/img/big-throbber.gif') center center no-repeat; } </style> <script src="//code.jquery.com/jquery-2.0.3.min.js"></script> <script> $(function() { $('#pictures a').click(function(event) { event.preventDefault(); $('#frame img').fadeOut(function() { $(this).remove(); }); var src = $(event.target).attr('href'); var img = $('<img/>').attr('src', src).attr('alt', 'Picture'); // Käytetään teennäistä viivettä demoefektin vuoksi setTimeout(function() { img.ready(function() { img.hide().appendTo('#frame').fadeIn(); }); }, 3000); }); }); </script> </head> <body> <div id="frame"> <img src="<?= $data[0]['picture'] ?>" alt="Picture"/> </div> <ul id="pictures"> <?php foreach ($data as $row): ?> <li><a href="<?= $row['picture'] ?>"><?= $row['time'] ?></a></li> <?php endforeach ?> </ul> </body> </html>
reca kirjoitti:
Hienoa, näkyy LOADING... eikä oikeaa kuvaa tule. Olikohan tämä varmasti tarkoitus?
Etkö osaa muokata tuota niin, että saat seuraavan kuvan näkyviin? :D
Valitettavasti jsfiddle ei millään halunnut jättää sitä koodinpätkää, joka laittaa seuraavan kuvan, tuohon linkkiin...
Tuon pitäisi toimia. Forkattu reca:n alkuperäisestä koodista.
Mitähän teillä mahtaa päässä liikkua? Jätkät yrittää kopioida mun idean muttette onnistu tekemään edes puoliksi toimivaa toteutusta, vaikka mun koodi napottaa suoraan tuossa nassun edessä.
Laitetaan se nyt vielä fiddlenäkin sitten:
http://jsfiddle.net/fxLWJ/1/
Jos tarkoitus on että jotain tapahtuu vasta kun kuvatiedosto on lautautunut niin ready-eventti ei siinä tapauksessa toimi, se kun laukeaa heti kun elementti on luotu eikä jää odottamaan ulkoisen datan latautumista.
Load-eventti laukeaa kuvalle vasta kun data on latautunut. Ja jos lataaminen epäonnistuu niin sieltä laukeaa error-eventti.
Lienee huomionarvoinen asia, että load-eventti ei laukea koskaan, jos kuva tulee välimuistista.
Aihe on jo aika vanha, joten et voi enää vastata siihen.