Bagaimana untuk Memuatkan Imej Secara Dinamik dari Folder ke Halaman Web Menggunakan jQuery/JavaScript?

Memuatkan Imej dari Folder ke dalam Halaman Web Menggunakan jQuery/JavaScript

Soalan:

Bagaimana kita boleh memuatkan secara dinamik semua imej daripada folder tertentu ke dalam halaman HTML menggunakan jQuery/JavaScript, walaupun nama imej tidak berurutan?

Jawapan:

Untuk mencapai ini, kita boleh gunakan AJAX dan teknik bijak untuk mengenal pasti fail imej dalam folder yang dikehendaki.

<code class="javascript">var folder = "images/";

$.ajax({
    url: folder,
    success: function (data) {
        $(data)
            .find("a")
            .attr("href", function (i, val) {
                if (val.match(/\.(jpe?g|png|gif)$/)) {
                    $("body").append("<img src='" + folder + val + "'>");
                }
            });
    },
});</code>

Penjelasan:

• AJAX digunakan untuk mendapatkan semula kandungan folder "imej".
• Data respons dihuraikan menggunakan jQuery untuk mencari teg sauh () yang mewakili fail dalam folder.
• Kami mengulangi teg sauh dan menyemak sama ada nama fail mempunyai mana-mana sambungan imej yang disokong (cth., JPEG, PNG, GIF).
• Untuk setiap imej yang sah, kami mencipta tag dan tambahkannya pada badan halaman HTML.