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

What is the best way to modify a date and time within an <td><input> element using jQuery?

Is it possible to send both props and a function within a single onClick event in React?

Retrieving Precise Information from jQuery/AJAX and PHP Script

Distinguishing between client side rendering and server side rendering is the backbone of web development

What is the best way to deduct a variable's previous value from the final value, ensuring that the total value does not surpass a specific limit?

Sending JSON data back to the server using KeyValuePair in C#

Transforming JSON date format to a different one using Jackson libraries

Scrollable Tailwind components

Troubleshooting the Google OAuth 2.0 SAMEORIGIN Issue

Redirecting to a new page in JavaScript as the clock nears the top of the hour after 5 minutes

Excessive image display | HTML and CSS synergize

I'm looking for a solution to enable the execution of 'expandRowByClick' only when clicking on a specific area within the row in Ant Design. Any suggestions?

"Disappearing Act: The Mysterious Vanishing of the JS

Wheelnav.js implementing a dynamic bouncing animation

Express bodyParser may encounter difficulties in parsing data sent from Internet Explorer

When trying to convert to JSON in node, the process fails. However, the data can still be

Two CSS files are loaded sequentially

Having difficulty executing the npm test command for my Angular 2 application

What is the best way to use a JavaScript function as a callback?

Is there a way to remove deleted SASS styles from the generated CSS?