首页 > 试题广场 >

js怎么控制一次加载一张图片，加载完后再加载下一张

[问答题]
js怎么控制一次加载一张图片，加载完后再加载下一张
添加回答
Shadow46头像 Shadow46
JS取到所有src后，首先加载第一张，监听事件，ONEEROR或者ONLOAD事件被触发后，加载下一张
发表于 2019-01-12 10:14:40 回复(0)
任小宪头像 任小宪

呃呃呃，只有我点链接，看照片了嚒。。

发表于 2019-04-02 01:07:02 回复(0)
hilone头像 hilone
/*
1.通过promis和generator进行控制执行顺序，通过img.complete作为判断条件
2.通过onreadyStatechange,判断readyState=="complete"||readyState=="loaded"
3.通过onload
我先写一种实现方式吧
*/
var img_list = document.querySelectorAll("img");
//生成迭代器,返回值为新的 promise对象
function* loadImge(target) {
var i = 0,
len = target.length;
while (i < len) {
yield new Promise((resolve, reject) => {
resolve(target[i]);
})
i++
}


};
var imgItem = loadImge(img_list);
var imgSrc = [
'https://images.nowcoder.com/images/20190504/558938736_1556938017407_08BE24AA8CED88F49348A8C550F96FA3@0e_100w_100h_0c_1i_1o_90Q_1x',
'https://images.nowcoder.com/images/20180102/63_1514861814371_E573EC9DA05DFAC7340D94F1A6D246E3@0e_100w_100h_0c_1i_1o_90Q_1x'
];
(function() {
//运用闭包对i进行缓存
let i = 0;

function loadStack(src) {
let imgNext = imgItem.next();
//迭代器还有值
if (!imgNext.done) {
imgNext.value.then(item => {
item.setAttribute("src", src[i]);
i++;
if (item.complete && i < src.length) {
//递归执行
loadStack(src);
}
});
} else {
return;
}

}
loadStack(imgSrc);
})()
编辑于 2019-05-06 22:36:56 回复(2)
牛客633315号头像 牛客633315号
(￣o￣) . z Z
发表于 2019-01-28 08:35:39 回复(1)
瓶子君头像 瓶子君
图片加载写成一个函数，图片加载后递归调用 或者使用generator
编辑于 2019-01-17 22:51:32 回复(0)
执白头像 执白

load

发表于 2019-05-08 13:30:59 回复(0)
一个好名字头像 一个好名字
.
发表于 2019-04-25 17:42:15 回复(0)
李狗蛋201904131609279头像 李狗蛋201904131609279
<script>
let images = [
];
let count = 0;
let imgs = document.getElementsByClassName('img');
function loadImg(images) {
let that = this;
if (count == images.length) { return false }
let img = new Image();
img.src = images[count];
img.onload = function (e) {
imgs[count].src = img.src
count++;
setTimeout(function(){
that.loadImg(images)
},1000)
}
}
loadImg(images);
</script>
发表于 2019-04-23 14:59:24 回复(0)
香香20190314头像 香香20190314
懒加载,image  lazyload
发表于 2019-03-14 19:07:59 回复(0)
笑着流泪1头像 笑着流泪1
进去了
发表于 2019-03-14 07:12:15 回复(0)
木子哩哩啦啦头像 木子哩哩啦啦
写一个图片加载函数，给图片绑定onload事件，触发时传入下张图片地址再次调用图片加载函数
发表于 2019-03-04 12:46:35 回复(0)
rrrlll头像 rrrlll

请求来多张图片的src后，放入熟组，封装一个函数，randerpage，参数为这个熟组以及index。然后定一个onload事件里面randerpage（数组，index）执行，index一开始是零，randerpage执行完，index++


发表于 2019-02-26 09:49:43 回复(0)
马上就有人鱼线的头像 马上就有人鱼线的
懒加载
发表于 2019-02-21 21:24:20 回复(0)
不信背不下来反转链表了头像 不信背不下来反转链表了
踢踢踢
发表于 2019-02-06 23:41:28 回复(0)
暖锋头像 暖锋
这个场景不太懂，JS不是单线程的吗
发表于 2019-01-26 23:08:09 回复(1)
漠タクラマカソ头像 漠タクラマカソ
额
发表于 2019-01-09 23:28:36 回复(0)
虚拟匿名！头像 虚拟匿名！
上锁
发表于 2019-01-03 09:00:32 回复(0)
牛客958379号头像 牛客958379号
懒加载吗？ onload 
发表于 2019-01-01 16:34:26 回复(0)
sun_t头像 sun_t
h
发表于 2018-12-28 08:38:45 回复(0)
做个吃货有何不可/jie头像 做个吃货有何不可/jie
事件监听 或者加 过渡结束事件--transitionEnd
发表于 2018-12-23 20:51:17 回复(0)
提交观点

问题信息

前端工程师 Javascript
上传者：小小
难度：
21条回答 7658浏览

热门推荐

相关试题

扫一扫，把题目装进口袋

求职之前，先上牛客

扫描二维码，进入QQ群

扫描二维码，关注牛客公众号