Work with ( <div> + background-image)

[PJoy]

This is either a question or an enhancement request.

It is quite common to display images using a \<div> with a fixed width and height and a background image instead of an \<img> in order to avoid page "jumps" during the loading.

Does the plugin support it / are you planning to support it ? Thanks.

[pixelass]

the zoomed image is actually using bakground-position. If you want to get rid of page flow changes due to loading images you should look into techniques to do this (e.g. preload images).

The problem with the div is that you need to set the size after the image has been loaded otherwise the image is cropped or repeats, so this will not change anything since the height of the div would be 0 unless specified. (you want the bounding-box to be the same size as the actual image-content)

var src = '/images/image_01.png';
var $img = $('img');
var $div =  $('div');
$img.on('load', function() {
  $div.css({
    backgroundImage: 'url("' + src + '")',
    height: $img.height(),
    width: $img.width()
  });
});
$img.attr('src', src);

I hope that made sense