将 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 的了解足够多，可以将点点滴滴拼凑起来，做出有用的东西。上面的代码有点管用。

在我的控制台上，我看到单词 "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/

Edit/P。 S. 请注意，您的 if 测试检查元素是否在视图中是不正确的，因为 screen.height 顾名思义给出了整个 screen[=37] 的高度=]，不是浏览器客户区的高度。但这并不是您问题的核心，所以我将修复它作为 reader...

的练习

将 src 换成 lazy

swapping src to lazy

javascript

lazy-loading

image

setattribute