将src替换为lazy

Question

我对现有的懒惰加载插件不满意（它们太复杂了，我甚至无法理解其中的代码），我想我可以创建一个简单易懂的脚本来懒惰加载图像。

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

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

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

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有足够的了解，可以把bits&碎片来制作出有效的东西。上面的代码有点管用。

在我的控制台上，我看到"懒惰"一词已经成功地被视口中的图像替换为"src"。

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

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

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

我应该只使用任何一个可用的插件；只是想看看我是否可以创造一些简单的东西&容易的

既然我离实现这个目标如此之近，我不愿意放弃它。

任何帮助都将不胜感激。

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

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

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给出的是整个屏幕的高度，而不是浏览器中客户端区域的高度。但这并不是你问题的核心，所以我将把解决这个问题留给读者。。。