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

avatar Chin
@Chin

63 Kontribusi 13 Poin

Diperbarui 2 tahun yang lalu

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 &lt;div data-href='link'&gt; misalnya, lalu nanti via javascript, kamu ambil dengan <a href="https://www.w3schools.com/jsref/met_element_getattribute.asp">metode getAttribute</a></div>

avatar hilmanski
@hilmanski

2665 Kontribusi 2131 Poin

Dipost 2 tahun yang lalu

Tanggapan

Jadi link awalnya harus kelihatan ya ?

untuk jawab pertanyaan kamu, saya sudah update di atas ya

Oke terimakasih..

Login untuk ikut Jawaban