For preloading images using the following code:

jQuery.preloadImages = function() { for(var i = 0; i < arguments.length; i++) { jQuery("<img>").attr("src", arguments[i]); } }; var imagesCount = $(".zoom").length; for (var i = 0; i < imagesCount; i++) { var img = $(".zoom:eq("+i+")").attr("data-image"); $.preloadImages(img); }

How to click on the button with the zoom class to display the real width of the image? The button has a data-image attribute that contains the path to the image, and the image has already been loaded.

  • Well, the decision "in the forehead." If the picture itself is, then it can be loaded into an invisible block for a couple of seconds and calculate the width of the block and then delete it .. Otherwise, probably only by metadata, which also needs to be stored / received somewhere. - alexoander

1 answer 1

Try this:

 jQuery.preloadImages = function() { var images = []; for(var i = 0; i < arguments.length; i++) { var img = $("<img>"); img.attr("src", arguments[i]); images.push(img); } return images; }; $('a.zoom').each(function(i, el) { var link = $(this); var src = link.attr('data-image'); var img = $.preloadImages(src)[0][0]; link.click(function() { alert('Real width: ' + img.width + ' px'); return false; }); });