将src转换为懒惰

Question

对现有的懒加载插件（它们太复杂以至于无法理解其中的代码）都不满意，我认为我可以创建一个简单易懂的脚本，用于延迟加载图像。

我的想法很简单。从下面的（变形的）img标签开始。

<img lazy="http://lorempixel.com/400/200"/> 

使用javascript，当页面向上或向下滚动时，用“src”替换单词“lazy”。

function hackyaFunction_lazy() { 
    [].forEach.call(document.querySelectorAll('img[lazy]'), function(img) { 
    img.setAttribute('src', img.getAttribute('lazy')); 

    img.onload = function() { 

     var imgs = document.querySelectorAll('[lazy]'); 
     for (i = 0; i < imgs.length; i++) { 
     var o = imgs[i], 
      lazy = o.getAttribute('lazy'); 
     if (o.y <= (window.screen.height + window.scrollY + 50) && o.y >= (window.scrollY - 50)) { 
      o.setAttribute('src', lazy); 
      o.removeAttribute('lazy'); 
     } 
     } 
    } 
    window.onload = window.onscroll = hackyaFunction_lazy; 

    }); 
} 

我知道足够的javascript来位一起劈&件，使一些作品的。而上面的代码有点工作。

在我的控制台上，我发现单词“lazy”已成功替换为视口中图像的“src”。

但是，在视口之外的图像，这就是我所看到的。

<img lazy="http://lorempixel.com/400/200/sports/Dummy-Text" src="http://lorempixel.com/400/200/sports/Dummy-Text"> 

所以我一半工作代码&这是我能做到的最好。

我应该只使用任何一个可用的插件;只是想看看我是否可以创建简单的简单的&。

既然我很接近做这件事情，我不愿放弃它。

任何帮助将不胜感激。

我想在jsfiddle上放置整个东西（html & js），但图像无法显示在jsfiddle上。不知道为什么。

该代码在本地环境中工作（如所述）。

Answer 1

的.forEach()中的第一行改变当前图像的src而不删除lazy并没有测试它是否在视图或没有，所以.forEach()之后已经跑这条线的每一次他们都会所有已更新图像。这就是为什么当您使用开发工具检查元素时，许多图像同时具有src和lazy属性。

如果这个想法是只设置src一旦图像滚动到视图中，并为已经在视图页面加载任何图像，你可以仅保留内for循环的功能做到这一点：

function hackyaFunction_lazy() { 
    var imgs = document.querySelectorAll('[lazy]'); 
    for (i = 0; i < imgs.length; i++) { 
    var o = imgs[i]; 
    if (o.y <= (window.screen.height + window.scrollY + 50) && o.y >= (window.scrollY - 50)) { 
     o.src = o.getAttribute('lazy'); 
     o.removeAttribute('lazy'); 
    } 
    } 
} 

window.onload = window.onscroll = hackyaFunction_lazy; 

这工作，因为每个滚动它首先选择任何元素仍然有lazy属性，那么这些元素它测试它们是否考虑到，如果是它设置了src并删除lazy。尚未滚动到视图中的元素不会更新。

看到它在这里工作：https://jsfiddle.net/vb779g7v/2/

编辑/ P。 S.请注意，您的if测试检查元素是否在视图中是不正确的，因为screen.height顾名思义，给出了整个屏幕的高度，而不是浏览器中客户区的高度。但是，这不是你的问题的核心，所以我会留下修复作为一个读者的练习...