Nová ukázka
Reset
Načíst z URL
Uložit a získat odkaz
Vztahuje se k…
Nevyplňujte
Napiště „nejsem robot“
▶
Přepnout zobrazení
Výsledek
Tady bude 1. <img src="" alt="Obrázek poprvé" id="img1"><br> Tady bude 2. <img src="" alt="Obrázek podruhé" id="img2"><br> Tady bude 3. <img src="" alt="Prodáno... Tedy obrázek potřetí" id="img3"><br> <button onclick="doOfflineStuff()">Jakože offline a chci pracovat s obrázky button</button> <!-- Knihovna, kterou použiju pro ajaxová volání --> <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.16.2/axios.min.js"></script>
HTML
Autoformát
Standardní režim
Mobilní zobrazení
CSS
Autoformát
CSS reset
Až na konci
// Pole cest k obrázkům (v tvém případě to budou nějaké cesty k obrázkům, na serveru) const images = [ { url: 'http://kod.djpw.cz/ico/br_prev-black.png', tempUrl: '' }, { url: 'http://kod.djpw.cz/ico/br_prev-black.png', tempUrl: '' }, { url: 'http://kod.djpw.cz/ico/br_prev-black.png', tempUrl: '' } ]; // Pole ajax callů na jednotlivé obrázky const queue = []; // Proiteruju cesty k obrázkům a pro každou z nich udělam ajax call a vyžádám si je v blobu for (const image of images) { queue.push(axios.get(image.url, { responseType: 'arraybuffer' })); } axios.all(queue) .then(axios.spread(function () { for (let i = 0; i < arguments.length; i++) { const arraybuffer = arguments[i].data; const blob = new Blob([arraybuffer], { contentType: 'image/png' }); const url = URL.createObjectURL(blob); images[i].tempUrl = url; } })); function doOfflineStuff() { let i = 0; for (const image of images) { i++; const el = document.getElementById('img' + i); el.src = image.tempUrl; } }
J
ava
S
cript
Autoformát
jQuery
Umístění JS
window.onload
</head>
</body>