Using jQuery, we can replace all `<span>` elements with `<img>` elements and then verify if the images have been successfully loaded

Question

Using jQuery, we can replace all `<span>` elements with `<img>` elements and then verify if the images have been successfully loaded

Similar Inquiry:
jQuery check if image is loaded

I find myself in a scenario where the following HTML structure is utilized:

<div class="image">
    <img class="" src="content-images/1.jpg">
    <span class="slide" rel="content-images/2.jpg"></span>
    <span class="slide" rel="content-images/3.jpg"></span>
    <span class="slide" rel="content-images/4.jpg"></span>
</div>

All children of div.image are absolutely positioned in the CSS, causing them to overlap each other.

My objective is to switch the span elements with img ones and set their src attribute to the value specified in the rel attribute within each span. These images are large and high resolution, so they may take some time to load completely.

Using JavaScript or jQuery, I need to display a loading message or indicator from when a button is clicked elsewhere on the page until all the span elements have been replaced with img elements and finished loading.

Due to issues with images and caching, using jQuery's .load() method is not feasible in this case.

While attempting to use imagesloaded, it did not provide the functionality I require.

Are there any alternative methods you can suggest to achieve this task?

javascript jquery css image

Answer 1

Answer №1

Not entirely certain if this is the exact solution you're looking for, but it's worth a shot...

$("#button").click(function(){
    console.log("Loading initiated...");
    // Identify all spans to be replaced and count them
    var imgSpans = $("div.image span.slide"), 
        toLoad = imgSpans.length,
        loaded = 0;
    // Initiate loading for each image
    for (var i = 0; i < toLoad; ++i) {
        // Use closure to maintain correct value of i
        (function(i){
            // Preload image
            var img = new Image();
            img.src = imgSpans.eq(i).attr("rel");
            img.onload = function(){
                // Upon completion of loading, replace span with image...
                imgSpans.eq(i).replaceWith(img);
                if (++loaded == toLoad) {
                    // ...and check if all images have been loaded at this point
                    console.log("Loading completed...");
                }
            };
        })(i);
    }
});

DEMO (JSFiddle)

Answer 2

Not entirely certain if this is the exact solution you're looking for, but it's worth a shot...

$("#button").click(function(){
    console.log("Loading initiated...");
    // Identify all spans to be replaced and count them
    var imgSpans = $("div.image span.slide"), 
        toLoad = imgSpans.length,
        loaded = 0;
    // Initiate loading for each image
    for (var i = 0; i < toLoad; ++i) {
        // Use closure to maintain correct value of i
        (function(i){
            // Preload image
            var img = new Image();
            img.src = imgSpans.eq(i).attr("rel");
            img.onload = function(){
                // Upon completion of loading, replace span with image...
                imgSpans.eq(i).replaceWith(img);
                if (++loaded == toLoad) {
                    // ...and check if all images have been loaded at this point
                    console.log("Loading completed...");
                }
            };
        })(i);
    }
});

DEMO (JSFiddle)

Using jQuery, we can replace all `<span>` elements with `<img>` elements and then verify if the images have been successfully loaded

Answer №1

Similar questions

When attempting to add an item to an array within a sub-document using Mongoose and MongoDB, the error message "Property 'messages' not found" is returned

Tips for maintaining accessibility to data while concealing input information

Enhance your HTML5 video by incorporating strategically placed buttons (images) as an overlay

What is the best way to incorporate a countdown timer on an ASP.NET webpage?

Invalid PDF File - Unable to Complete Download via $http

The unique identifier for a specific child element in Firefox

Utilize React to process and submit payments through Stripe

Refresh the Express Server following the file upload

What is the best way to personalize the collector for each individual?

Leveraging $.ajax() for sending a POST request to a PHP file hosted on a different domain

Steering clear of using relative paths for requiring modules in Node.js

Efficiently loading data using lazy loading in jsTree

Tips for testing a mapbox popup using jasmine testing?

Tips on invoking a mixin within a Jade template showcased in a Node/Express endpoint

The repository's dependencies remain unresolved by Nest

Having trouble retrieving values for jVectorMap? The getElementById method doesn't seem to be functioning as

Attach the footer to the bottom of the screen only if the main page text is limited in length

How about this: "Effortlessly upload files by simply dragging and dropping them from your computer to

"encountered net::ERR_NAME_NOT_RESOLVED error when trying to upload image to s3 storage

Revoke the prior invocation of the Google Maps geocoding function