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

What is the best way to implement a recursive service call that is triggered automatically at regular intervals?

What causes the fixed div to appear when scrolling horizontally?

Experiencing blank areas when I try to minimize the screen while using Chrome

Issue with unit testing a ViewportRuler in Angular 2 Material Library

Passing data from a method callback to a function and returning a variable in the same function

What is the best way to retrieve a particular value from a database using PHP?

Looping through an array of JSON objects in Javascript results in finding instances, however, the process records them

Unveil the modules of a Node.js NPM application

Using ExpressJS and Jade to submit a form using the POST method and redirecting to a specified path

How can I find the hexadecimal color value from this jQuery plugin?

Leveraging the power of angular's $asyncValidators by implementing a cache

Need to capture click events on an HTML element? Here's how!

Exploring the distinctions among different xpath implementations in Selenium WebDriver

Angular.js: Ensure all services are loaded before initializing the application

Tips for using the deferred method in ajax to enhance the efficiency of data loading from a php script

How can I create a custom AppBar transition using Material-UI?

"Switching from vertical to horizontal time line in @devexpress/dx-react-scheduler-material-ui: A step-by-step guide

Images in CSS not copied to the output directory when using Webpack

Div sliding out of view

Saving a revised JSON file using AngularJS