Display two images consecutively within a single img tag

Question

Display two images consecutively within a single img tag

My goal is to display two images using a single <img /> tag. The first small image will be loaded and shown using the src attribute, while the second large image will be contained within the data-src attribute. Only one image will be displayed at a time, with the small image initially loading and then being replaced by the large image once it has fully loaded in the background. I have code that switches the large image from the data-src attribute to the src attribute.

$(document).ready(function(){
    $("#image4").load(function(){
        var imgDefer = document.getElementsByTagName('img');
        for (var i=0; i<imgDefer.length; i++) {
            if(imgDefer[i].getAttribute('data-src')) {
                imgDefer[i].setAttribute('src',imgDefer[i].getAttribute('data-src'));
            }
        }
    });
});

This approach allows me to show the small image first without having to wait for the large image to load completely. However, I am currently experiencing an issue where both small and large images are loading concurrently when the page loads. It's important to note that these images feature drag and zoom functionality. You can view the live version of this code here:

javascript jquery html css image

Answer 1

Answer №1

Your current code snippet is not being used on your server - it seems like another script is handling the mousewheel event.

To resolve this issue, consider preloading the large image in the background and then switching to display it once fully loaded:

// Loop through all images
$('img').each(function(i, img) {
 var img = $(img);
 // Check if they have a data-src attribute
 if(img.attr('data-src')) {
   // Listen for load event on initial image
   img.one('load', function() {
     // Once small image is loaded, start loading large image
     // Create hidden image element
     var hiddenImg = new Image();
     hiddenImg.onload = function() {
          // Set src attribute of real image once hidden image is loaded
          img.attr('src', img.attr('data-src'));
      };
      // Begin loading the resource
      hiddenImg.src = img.attr('data-src');
     });
   });
});

(Credits: Load image from url and draw to HTML5 Canvas)

Answer 2

Your current code snippet is not being used on your server - it seems like another script is handling the mousewheel event.

To resolve this issue, consider preloading the large image in the background and then switching to display it once fully loaded:

// Loop through all images
$('img').each(function(i, img) {
 var img = $(img);
 // Check if they have a data-src attribute
 if(img.attr('data-src')) {
   // Listen for load event on initial image
   img.one('load', function() {
     // Once small image is loaded, start loading large image
     // Create hidden image element
     var hiddenImg = new Image();
     hiddenImg.onload = function() {
          // Set src attribute of real image once hidden image is loaded
          img.attr('src', img.attr('data-src'));
      };
      // Begin loading the resource
      hiddenImg.src = img.attr('data-src');
     });
   });
});

(Credits: Load image from url and draw to HTML5 Canvas)

Answer 3

Answer №2

One strategy is to initially load content into a hidden element, and then dynamically change it once the loading process is complete.

Answer 4

One strategy is to initially load content into a hidden element, and then dynamically change it once the loading process is complete.

Answer 5

Answer №3

One possible approach is to initiate the loading process after the image has been fully loaded.

$('img').load(function(){
    var bigImgSrc = $(this).data('src');
    var img = $(this);

    if(bigImgSrc !== img.prop('src')){
      var bigImg =$('<img>').prop('src', bigImgSrc);
      bigImg.load(function(){
        img.prop('src', bigImgSrc);
      });
    }
});

It's uncertain whether you need to attach the bigImg to the DOM in order for it to load properly. If necessary, you can use bigImg.hide().appendTo('body') and then remove it once it has finished loading.

Keep in mind that the load function may not work under all circumstances; refer to https://api.jquery.com/load-event/ for more information.

Edit: The previous code example contained an infinite loop.

Answer 6

One possible approach is to initiate the loading process after the image has been fully loaded.

$('img').load(function(){
    var bigImgSrc = $(this).data('src');
    var img = $(this);

    if(bigImgSrc !== img.prop('src')){
      var bigImg =$('<img>').prop('src', bigImgSrc);
      bigImg.load(function(){
        img.prop('src', bigImgSrc);
      });
    }
});

It's uncertain whether you need to attach the bigImg to the DOM in order for it to load properly. If necessary, you can use bigImg.hide().appendTo('body') and then remove it once it has finished loading.

Keep in mind that the load function may not work under all circumstances; refer to https://api.jquery.com/load-event/ for more information.

Edit: The previous code example contained an infinite loop.

Display two images consecutively within a single img tag

Answer №1

Answer №2

Answer №3

Similar questions

Issue with the scope causing global variable not to update when button is pressed

Enhanced Navbar Dropdown Menu with Multiple Columns in Bootstrap 4 Beta 2

Event listener for clicking on a custom overlay in Google Maps

Creating a dropdown navigation menu using jQuery

Discovering the indices of undefined array elements in JavaScript without using a loop

Dynamically load WordPress content using ajax and incorporate CSS3 animations for added visual appeal

Tips for combining values from two inputs to an angular ng-model in AngularJS

Is it possible to use Ajax post with localhost on Wamp server?

Dealing with the 'routes not found' error in a Node.js Express application (troubleshooting)

The buffer for the operation `users.insertOne()` exceeded the timeout limit of 10000 milliseconds, resulting in a Mongoose

Struggling to perform a basic http GET request in Angular 2

In PowerShell, use the "ConvertTo-Html" commandlet to incorporate

Localhost Firebase authentication with Facebook integration

How to modify this to return a function and eliminate the need for declaring a function

How can I load a URL without causing a page refresh?

The implementation of $(this).addClass within AJAX success is not yielding the desired results

Node.js seems to be playing tricks on me. It's creating bizarre names and tweets by utilizing arrays

Placing an exit button beside an image for easy navigation

Choose a single SVG file based on its unique ID

Switching the Vue image on Routerlink's isExactActive feature