lazysizes icon indicating copy to clipboard operation
lazysizes copied to clipboard

Published 20 hours ago • verified publisher icon aFarkas

Lazy loading of SVG foreignObject after zoom animation.

Open lukaszolek opened this issue 2 years ago • 0 comments

Hi, i've got the similar problem like here https://github.com/aFarkas/lazysizes/issues/691, but for foreignObject that gets zoomed in in SVG animation.

Here is the code (see also here: https://jsfiddle.net/lukaszolek/egnzjyf9/7/):

<!DOCTYPE html>
<html>
<head>
    <script src="https://afarkas.github.io/lazysizes/lazysizes.min.js" async=""></script>
</head>
<body>

    <svg width="300px" height="300px" viewBox="-555.5555555555555 -472.22222222222223 1137.7777777777778 1137.7777777777778">
        <animate attributeName="viewBox" to="-133.5 -183.5 267.0 367.0" dur="0.7s" fill="freeze" begin="mouseover" calcMode="spline" keyTimes="0;1" keySplines="0.4, 0, 0.2, 1"/>
        <animate attributeName="viewBox" to="-555.5555555555555 -472.22222222222223 1137.7777777777778 1137.7777777777778" dur="0.7s" fill="freeze" begin="mouseout" calcMode="spline" keyTimes="0;1" keySplines="0.4, 0, 0.2, 1"/>
        <foreignObject x="-555.5555555555555" y="-472.22222222222223" width="1137.7777777777778" height="1137.7777777777778">
            <img width="1137.7777777777778" height="1137.7777777777778" data-sizes="auto" class="lazyload" data-srcset="https://fra1.digitaloceanspaces.com/frami/backgrounds/layers/thumbnails/Boho_kidsroom_bright_warm_front_90x65_layer_0.webp.50x50_q85.png?AWSAccessKeyId=QWB7TF5DZPDY75OTEV4P&Signature=b4gGaWUsP63saAz5moZomi5nJhk%3D&Expires=1654869805 50w, https://fra1.digitaloceanspaces.com/frami/backgrounds/layers/thumbnails/Boho_kidsroom_bright_warm_front_90x65_layer_0.webp.180x180_q85.png?AWSAccessKeyId=QWB7TF5DZPDY75OTEV4P&Signature=kM15LOolLCPq0Xh93QdYxMwupVg%3D&Expires=1654869805 180w, https://fra1.digitaloceanspaces.com/frami/backgrounds/layers/thumbnails/Boho_kidsroom_bright_warm_front_90x65_layer_0.webp.360x360_q85.png?AWSAccessKeyId=QWB7TF5DZPDY75OTEV4P&Signature=gIr9pC8QFE7QGKViYXn9f3v220w%3D&Expires=1654869805 360w, https://fra1.digitaloceanspaces.com/frami/backgrounds/layers/thumbnails/Boho_kidsroom_bright_warm_front_90x65_layer_0.webp.540x540_q85.png?AWSAccessKeyId=QWB7TF5DZPDY75OTEV4P&Signature=D54ZQQ7I9wAGJ%2BlAqd5zR1AAE%2F4%3D&Expires=1654869806 540w, https://fra1.digitaloceanspaces.com/frami/backgrounds/layers/thumbnails/Boho_kidsroom_bright_warm_front_90x65_layer_0.webp.720x720_q85.png?AWSAccessKeyId=QWB7TF5DZPDY75OTEV4P&Signature=pMvOsJ27%2FciEX2%2FLEl9enlU2sAE%3D&Expires=1654869806 720w, https://fra1.digitaloceanspaces.com/frami/backgrounds/layers/thumbnails/Boho_kidsroom_bright_warm_front_90x65_layer_0.webp.900x900_q85.png?AWSAccessKeyId=QWB7TF5DZPDY75OTEV4P&Signature=9uXXKVWiWYrm6wUbseNE3CArlNg%3D&Expires=1654869806 900w">
        </foreignObject>
        <svg x="-133.5" y="-183.5">
            <filter id="shadow" color-interpolation-filters="sRGB">
                <feDropShadow dx="-30" dy="2" stdDeviation="10" flood-opacity="0.4"/>
            </filter>
            <g color="#e5e7eb">
                <svg x="21.0" y="21.0" width="225.0" height="325.0" filter="url(#shadow)">
                    <svg width="225.0" height="325.0">
                        <rect x="0" y="0" width="225.0" height="325.0" fill="White" stroke="gray" stroke-width="0.4"/>
                        <svg x="16" y="16" width="192.0" height="292.0">
                            <rect x="0" y="0" width="192.0" height="292.0" fill="#FFFFFF" stroke="gray" stroke-width="0.5"/>
                            <svg x="0.0" y="0.0" width="192.0" height="292.0">
                                <foreignObject x="-8.290759554910494" y="0" width="208.581519109821" height="292.0">
                                    <img id="im1" width="208.581519109821" height="292.0" data-sizes="auto" class="lazyload" src="https://fra1.digitaloceanspaces.com/frami/images/guwf4494/thumbnails/x5h9t9xu.jpg.50x50_q85.jpg?AWSAccessKeyId=QWB7TF5DZPDY75OTEV4P&Signature=CSop%2Fyt2LHzOrf%2F1p%2FzieJOVrzs%3D&Expires=1654869808" data-srcset="https://fra1.digitaloceanspaces.com/frami/images/guwf4494/thumbnails/x5h9t9xu.jpg.50x50_q85.jpg?AWSAccessKeyId=QWB7TF5DZPDY75OTEV4P&Signature=CSop%2Fyt2LHzOrf%2F1p%2FzieJOVrzs%3D&Expires=1654869808 50w, https://fra1.digitaloceanspaces.com/frami/images/guwf4494/thumbnails/x5h9t9xu.jpg.180x180_q85.jpg?AWSAccessKeyId=QWB7TF5DZPDY75OTEV4P&Signature=m4tZq%2FyuYLHny%2BWakAiTYzBG8vM%3D&Expires=1654869809 180w, https://fra1.digitaloceanspaces.com/frami/images/guwf4494/thumbnails/x5h9t9xu.jpg.360x360_q85.jpg?AWSAccessKeyId=QWB7TF5DZPDY75OTEV4P&Signature=ChLEB9VuE%2BTugZPoCrzIj9dnm60%3D&Expires=1654869811 360w, https://fra1.digitaloceanspaces.com/frami/images/guwf4494/thumbnails/x5h9t9xu.jpg.540x540_q85.jpg?AWSAccessKeyId=QWB7TF5DZPDY75OTEV4P&Signature=EHHePppoduqXlURzgTVK9FCvT8U%3D&Expires=1654869812 540w, https://fra1.digitaloceanspaces.com/frami/images/guwf4494/thumbnails/x5h9t9xu.jpg.720x720_q85.jpg?AWSAccessKeyId=QWB7TF5DZPDY75OTEV4P&Signature=K2x69G3Ec2KnrcOyHdRab%2FWNkkU%3D&Expires=1654869814 720w, https://fra1.digitaloceanspaces.com/frami/images/guwf4494/thumbnails/x5h9t9xu.jpg.900x900_q85.jpg?AWSAccessKeyId=QWB7TF5DZPDY75OTEV4P&Signature=LkBaGjgwgtKc8%2BwTYzIumgSrRlI%3D&Expires=1654869815 900w">
                                </foreignObject>
                            </svg>
                        </svg>
                    </svg>
                </svg>
            </g>
        </svg>
        <foreignObject x="-555.5555555555555" y="-472.22222222222223" width="1137.7777777777778" height="1137.7777777777778">
            <img width="1137.7777777777778" height="1137.7777777777778" data-sizes="auto" class="lazyload" data-srcset="https://fra1.digitaloceanspaces.com/frami/backgrounds/layers/thumbnails/Boho_kidsroom_bright_warm_front_90x65_layer_1.webp.50x50_q85.png?AWSAccessKeyId=QWB7TF5DZPDY75OTEV4P&Signature=%2FYvwZVDIyikVd7OsnrUh0O0c0H4%3D&Expires=1654869805 50w, https://fra1.digitaloceanspaces.com/frami/backgrounds/layers/thumbnails/Boho_kidsroom_bright_warm_front_90x65_layer_1.webp.180x180_q85.png?AWSAccessKeyId=QWB7TF5DZPDY75OTEV4P&Signature=BKiBZudxX8GDDV8D6%2BSocVrChUA%3D&Expires=1654869805 180w, https://fra1.digitaloceanspaces.com/frami/backgrounds/layers/thumbnails/Boho_kidsroom_bright_warm_front_90x65_layer_1.webp.360x360_q85.png?AWSAccessKeyId=QWB7TF5DZPDY75OTEV4P&Signature=SALGLkXr1kF5cfibK5n3fgbwyvY%3D&Expires=1654869805 360w, https://fra1.digitaloceanspaces.com/frami/backgrounds/layers/thumbnails/Boho_kidsroom_bright_warm_front_90x65_layer_1.webp.540x540_q85.png?AWSAccessKeyId=QWB7TF5DZPDY75OTEV4P&Signature=Jlpe%2Fjcog8YQugHZLY8GXugoX3Q%3D&Expires=1654869805 540w, https://fra1.digitaloceanspaces.com/frami/backgrounds/layers/thumbnails/Boho_kidsroom_bright_warm_front_90x65_layer_1.webp.720x720_q85.png?AWSAccessKeyId=QWB7TF5DZPDY75OTEV4P&Signature=IW2hHRJlrFjBJ3CQwYa94gP0pCs%3D&Expires=1654869806 720w, https://fra1.digitaloceanspaces.com/frami/backgrounds/layers/thumbnails/Boho_kidsroom_bright_warm_front_90x65_layer_1.webp.900x900_q85.png?AWSAccessKeyId=QWB7TF5DZPDY75OTEV4P&Signature=8m7bPfjg8ST7styQbXhApq7eFDc%3D&Expires=1654869806 900w">
        </foreignObject>
    </svg>

    <script lang="text/javascript">
    document.addEventListener('lazybeforesizes', ({target, detail}) => {
        detail.width = target.getBoundingClientRect().width;
    });
    </script>
</body>
</html>

After loading the document the lazysizes loads correct images from srcset. However, when you hover on this image, the frame on the wall gets zoomed in with viewbox animation. Can I somehow trigger loading correct image resolution after the zoom takes place?

lukaszolek avatar Jun 10 '22 13:06 lukaszolek