How to Dynamically Load Images from a Folder into a Web Page Using jQuery/JavaScript?

Loading Images from a Folder into a Web Page Using jQuery/JavaScript

Question:

How can we dynamically load all images from a specific folder into an HTML page using jQuery/JavaScript, even when the image names are not sequential?

Answer:

To achieve this, we can utilize AJAX and a clever technique to identify image files within the desired folder.

<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>

Explanation:

• AJAX is used to retrieve the contents of the "images" folder.
• The response data is parsed using jQuery to locate anchor tags () that represent files within the folder.
• We iterate through the anchor tags and check if the file names have any of the supported image extensions (e.g., JPEG, PNG, GIF).
• For each valid image, we dynamically create an tag and append it to the body of the HTML page.

Note:

• For this to work, ensure that the server has "Option Indexes" turned on.
• If using a server like Express for Node, you may need to install and use a package named serve-index to enable file listings.

The above is the detailed content of How to Dynamically Load Images from a Folder into a Web Page Using jQuery/JavaScript?. For more information, please follow other related articles on the PHP Chinese website!