Postingan lainnya
Kelas Premium!
Belajar Javascript untuk website
Gunakan kupon "mulaijs" untuk diskon 75 ribu!
Membuat Loading Saat Mengkonversi Image Ke Base64
Bagaimana cara agar saat mengkonversi banyak image ke Base64 di PHP akan muncul Text "Loading.." saat proses konversi,
Saya ingin mengonversi banyak gambar ke Base64 blob tapi itu membuat Loading page lambat jadi saya ingin agar halaman di load terlebih dahulu dan menjalankan konversi setelah page di load dan saat menjalankan konversi tersebut akan muncul teks "Loading.."
Inilah kode sederhana yang saya miliki
<?php
$im = ["linkgambar1","linkgambar2","linkgambar3"];
$i = 0;
while($im[$i] == TRUE){
// Read image path, convert to base64 encoding
$imageData = base64_encode(file_get_contents($im[$i]));
// Format the image SRC: data:{mime};base64,{data};
$src = 'data:image/jpeg;base64,'.$imageData;
// Echo out a sample image
echo '<img src="' . $src . '">';
$i = $i+1;
}
?>
Seperti itu , tapi saya juga ingin agar setiap 1 gambar berhasil di konversi langsung di tampilkan jadi misal ada 3 gambar yang akan di konversi maka akan ada 3 teks "Loading..."
Misal sudah berhasil terkonversi 1 gambar maka akan langsung di tampilkan (berlaku untuk semua gambar)
Mungkin ini akan ada hubungannya dengan ajax
1 Jawaban:
<div>Belajar menggunakan AJAX. <br>Nanti ajaxnya bisa loop kode <a href="https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch">fetch</a> (untuk request ke backend)<br><br>Idenya ada 3 div atau apapun elemennya.<br>Setiap div nya mewakili masing masing gambar. <br>Nanti saat user pencet "submit" atau action apapun, jalankan ajaxnya, loop ketiga "div" tersebut yang berisi link gambar, setiap loopnya lakukan fetch, setiap hasil fetch munculkan text di div Loading... , saat selesai hilangkan textnya<br><br>Untuk link awalnya tidak harus kelihatan,<br>kamu bisa menyimpan/menyembunyikan dia di attribute <div data-href='link'> misalnya, lalu nanti via javascript, kamu ambil dengan <a href="https://www.w3schools.com/jsref/met_element_getattribute.asp">metode getAttribute</a></div>
Tanggapan
Jadi link awalnya harus kelihatan ya ?
untuk jawab pertanyaan kamu, saya sudah update di atas ya
Oke terimakasih..