无法使用延迟加载 + 动态图像处理 Cloudinary

Question

我无法同时使用功能Cloudinary Lazyload + Dynamic image manipulation。

同时使用这两个功能有什么技巧吗？

我正在使用 HTML 网站。

我的代码是

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://unpkg.com/cloudinary-core@latest/cloudinary-core-shrinkwrap.js"></script> 
<script type="text/javascript">
         var cl = cloudinary.Cloudinary.new({cloud_name: "syg"}); 
         // replace 'demo' with your cloud name in the line above 
         cl.responsive();
</script>
<script>
        document.addEventListener("DOMContentLoaded", function() {
            const imageObserver = new IntersectionObserver((entries, imgObserver) => {
                entries.forEach((entry) => {
                    if (entry.isIntersecting) {
                        const lazyImage = entry.target
                        console.log("lazy loading ", lazyImage)
                        lazyImage.src = lazyImage.dataset.src
                    }
                })
            });
            const arr = document.querySelectorAll('img.lzy_img')
            arr.forEach((v) => {
                imageObserver.observe(v);
            })
        })
</script>

<img class="cld-responsive lzy_img"  data-src="https://res.cloudinary.com/syg/image/upload/w_auto,c_scale/sample.jpg" />

Answer 1

响应式脚本将应用相关的宽度值并根据容器大小替换 URL 中的w_auto。 由于您的代码不限制 <img> 容器，因此它应用了屏幕的最大宽度尺寸。

出于测试目的，您可以用<div style="width:50%;"></div> 包裹您的<img> 元素，您会看到图片网址相应地调整了宽度变换：

<div style="width:50%;">
  <img class="cld-responsive lzy_img" data-src="https://res.cloudinary.com/syg/image/upload/w_auto,c_scale/v346346/sample.jpg"/>
</div>

此外，您可以查看以下更广泛的 LQIP+Lazy Loading+Responsive 与 Cloudinary 实施，以获取有关如何在您的网站页面中实施这些功能的参考和想法。