Lazysizes: Blur-up: Copy style attribute from original <img> tag

[dhymik]

We render each img tag server-side with a style attribute, specifying object-position: xx% yy% which is specific to each individual image. Since the object position is specific to each single image, it cannot be specified in css, but we need to do it in style attributes.

However, this does not work together with blur-up. The blurred image is positioned differently since its img tag is rendered without the object-position style attribute.

Right now I am using a js hack for this to copy the styles, but I would like to avoid this.

The blur-up plugin should copy the style attribute of the original img tag. I am happy to prepare a pull-request.

Thank you for an awesome package!

Mikael

[aFarkas]

Right now I am using a js hack for this to copy the styles, but I would like to avoid this.

Sorry for not answering. Can you show me your hack?

[dhymik]

Below is my js code. I am using Initialize.js for it.

$(function () {

    /* work-around for Lazysizes.blurup :
     * copy style tag from original img tag to blur-up img tag
     * 
     * Uses Initialize library
     * */
    $.initialize(".ls-blur-up-img", function () {
        $(this).attr("style", $(this).prev("img").attr("style"));
    });
});

[dhymik]

The change to ls.blur-up.js does not work as intended. Line 87:

blurImg.style = img.style;

needs to be replaced with with

blurImg.style.cssText = img.style.cssText;

then it works as expected.

[aFarkas]

what an embarrassment ;-). [1,2] + [3,4] = ???

[dhymik]

:-) Unfortunately, I am capable of stuff like this every day...