将src转换为懒惰
对现有的懒加载插件(它们太复杂以至于无法理解其中的代码)都不满意,我认为我可以创建一个简单易懂的脚本,用于延迟加载图像。将src转换为懒惰
我的想法很简单。从下面的(变形的)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上。不知道为什么。
该代码在本地环境中工作(如所述)。
的.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
顾名思义,给出了整个屏幕的高度,而不是浏览器中客户区的高度。但是,这不是你的问题的核心,所以我会留下修复作为一个读者的练习...
对不起,我不能满足你的答案,因为我缺乏声誉;已经失去了我的登录凭据,我使用的是不显示我过去声誉点的Google登录信息。 我了解您的代码,我非常感谢您的回答。谢谢!! 我只是沮丧/愤怒,我不能自己写代码。我的意思是,我完全理解你的代码是如何工作的。我只是不明白为什么我不能像这样写自己。叹.... – HackYa
我不明白'img.onload'函数是给定的第一行'forEach()'已经改变了当前的'img [lazy]'图像来设置其'src',并且'forEach()'的所有迭代都将被改变。另外,为什么'window.onload = window.onscroll = hackyaFunction_lazy;'*里面的函数? (另外,为什么你可以使用'setAttribute()'当你可以说'img.src ='?) – nnnnnn
如果我不等待图像先加载,那么js(将lazy更改为src滚动)过早发射,破坏剧本。 我不知道我可以怎么做“img.src =”,稍后删除该属性。你有什么建议吗? – HackYa
如果想法是一旦图像在视图中就设置了src,我*认为*你需要的是摆脱'.forEach'和'img.onload',并保持内部'for'循环和在它之前的'var imgs ='行。然后分配'window.onload = window.onscroll = hackyaFunction_lazy;'* outside *函数。这样,每次函数运行时,它都会为当前视图中的图像更改'src' * only(仅当以前没有加载时)。你删除的唯一属性是“lazy”,因此你没有理由不能设置'img.src ='并且仍然使用'o.removeAttribute('lazy')'。 – nnnnnn