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

Question

我无法同时使用cloudary Lazyload +动态图像处理功能。

有什么技巧可以同时使用这两个函数吗?

我正在使用一个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>元素，您将看到图像URL相应地调整了宽度转换:

<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+延迟加载+响应与cloudary的更广泛的实现，以参考和想法如何在您的网站页面中实现这些功能。