Question

寻找用于图像延迟加载的简单而健壮的解决方案，我想到了下面的代码...我怀疑它可能太简短了，以至于不好。

基本原理是它将图片保留在真正的src属性中，但通过srcset加载占位符。大多数（较新的）浏览器将首先加载该文件，从而完全阻止了实际的图像加载。对于年长的浏览器，srcset是无关紧要的-懒惰负载对<10％的用户不起作用，但这是渐进式增强，足够了。

在删除srcset属性时，将加载并显示实际图像。

缺点是，在新的浏览器版本上，禁用javascript只会显示占位符。不太好，但是我可以决定添加noscript版的图像，或像这样保留它。

代码：

// get an array of the images

var images = document.getElementsByTagName('img');

// define the viewport function

function isInViewport(el){
var rect = el.getBoundingClientRect();
return (
rect.bottom >= 0 && 
rect.right >= 0 && 
rect.top <= (  window.innerHeight || document.documentElement.clientHeight) && 
rect.left <= (  window.innerWidth || document.documentElement.clientWidth)
 );
}

// define the loop that will remove the srcset when called

function showImage() {
for(var i=0; i<images.length; i++)  {
    if(isInViewport(images[i])) {
        images[i].removeAttribute("srcset");    
        }
    }
}

// call the function for the elements that are already in the viewport


showImage();


// add an event listner to see when the others come into view and show them


window.addEventListener('scroll', showImage);

到目前为止，该代码似乎按预期工作，

现在的问题是：

除了javascript问题外-是否可以访问？（用户代理可以使用srcset标记做什么？）
它可抓取/可索引吗？还是存在为实际图片拍摄占位符的风险？
代码是否还有其他问题，例如不兼容或漏洞？

这种惰性加载方法是否可访问/可爬网/可行？

0 个答案: