把src换成懒人

Question

不满意现有的延迟加载插件(它们非常复杂，我甚至无法理解其中的代码)，我想我可以创建一个简单易懂的脚本来加载图像。

我的想法很简单。从以下(变形) img标签开始。

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

使用javascript，在页面向上或向下滚动时，用"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有足够的了解，可以将比特和片段拼凑在一起，来制作一些有用的东西。上面的代码还能用。

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

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

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

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

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

现在我已经快把这件事做好了，我不愿意放弃它。

任何帮助都将不胜感激。

我想把整个东西(html & js)放在jsfiddle上，但是图像在jsfiddle上没有显示出来。不知道为什么。

代码在本地环境中工作(如所述)。

Answer 1

.forEach()中的第一行更改当前映像的src，而不移除lazy，也不需要测试它是否在视图中，因此在.forEach()为每个图像运行了该行之后，它们都将被更新。这就是为什么当您使用dev工具检查元素时，许多图像同时具有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/

请注意，如果元素在视图中，您的if测试检查是不正确的，因为顾名思义，screen.height给出的是整个屏幕的高度，而不是浏览器内客户区域的高度。但这并不是你问题的核心，所以我会把修正作为读者的练习.