插件描述：滚动到图片位置再赋值src加载图片,简单实用
//获取全部带有data-src的img
var limg = document.querySelectorAll("img[data-src]")
// Array.prototype.forEach.call()是一种快速的方法访问forEach，并将空数组的this换成想要遍历的list
Array.prototype.forEach.call(limg, function(item, index) {
var rect
//假如data-src为空跳出
if (item.getAttribute("data-src") === "")
return
//getBoundingClientRect用于获取某个元素相对于视窗的位置集合。集合中有top, right, bottom, left等属性。
rect = item.getBoundingClientRect()
// 图片一进入可视区，动态加载
if (rect.bottom >= 0 && rect.top < viewHeight) {
(function() {
var img = new Image()
img.src = item.getAttribute("data-src")
item.src = img.src
//给图片添加过渡效果，让图片显示
var j = 0
setInterval(function() {
j += 0.2
if (j <= 1) {
item.style.opacity = j
return
}
}, 100)
//去除data-src
item.removeAttribute('data-src')
})()
}
})
PREVIOUS:
NEXT:
相关插件-加载,滚动
讨论这个项目（3）回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约
怪咖 0
2018/9/30 9:38:31
-
请问这个可以在 移动端使用吗？为什么一直报 viewHeight 未定义呢？
1230
2018/11/14 17:39:20
-
js冲突
-_Jasminee0
2019/3/25 14:52:57
window.onscroll = function () {
Limg()
}
window.onload = function () {
var img = document.querySelectorAll("img[data-src]")
for (var i = 0; i < img.length; i++) {
img[i].style.opacity = "0"
}
Limg()
}
function Limg() {
var viewHeight = document.documentElement.clientHeight
var t = document.documentElement.scrollTop || document.body.scrollTop;
var limg = document.querySelectorAll("img[data-src]")
Array.prototype.forEach.call(limg, function (item, index) {
var rect
if (item.getAttribute("data-src") === "")
return
rect = item.getBoundingClientRect()
if (rect.bottom >= 0 && rect.top < viewHeight) {
(function () {
var img = new Image()
img.src = item.getAttribute("data-src")
item.src = img.src
var j = 0
setInterval(function () {
j += 0.2
if (j <= 1) {
item.style.opacity = j
return
}
}, 100)
item.removeAttribute('data-src')
})()
}
})
}
😃
- 😀
- 😉
- 😥
- 😵
- 😫
- 😘
- 😡
- 👍
- 🌹
- 👏
- 🍺
- 🍉
- 🌙
- ⭐
- 💖
- 💔
😃
取消回复
- 😀
- 😉
- 😥
- 😵
- 😫
- 😘
- 😡
- 👍
- 🌹
- 👏
- 🍺
- 🍉
- 🌙
- ⭐
- 💖
- 💔
