图片预加载多种实现方式

最新推荐文章于 2023-05-24 23:10:41 发布

JohnKuo888

最新推荐文章于 2023-05-24 23:10:41 发布

阅读量431

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/u012197150/article/details/105645639

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>三种预加载实现</title>
</head>
<body>
    <script>
    	//构建Promise异步对象，通过多种方式实现图片预加载
        function loadImage(src){
            var p = new Promise(function(resolve,reject){
                var img = new Image();
                img.onload=function(){
                    resolve(img);
                }
                img.onerror=function(){
                    reject(src);
                }
                img.src=src;
            });
            return p;
        }

        // 第一种方式,通过Promise.all()实现
        var arr = [];
        //图片命名从3-到79-，所以循环从3开始到80结束
        for(var i=3; i<80; i++){
            var p = loadImage("./img/"+i+"-.jpg");
            arr.push(p);
        }
        console.log(arr)
        Promise.all(arr).then(function(list){
            list.forEach(item=>{
                console.log(item.width,item.src);
            })
        })

        // 第二种方式通过生成器函数实现
        function* fn(){
            // 每次都进行断点
            for(var i=3; i<80; i++){
                yield loadImage("./img/"+ i +"-.jpg");
            }
        }
        var s = fn();
       	var values = s.next().value;
       	fns();
       	function fns(){
       		value.then(function(img){
       			console.log(img);
       			//阻塞同步
       			value=s.next().value;
       			if(value) fns();
       		});
       	}
       	
        // 第三种方式通过async异步
        async function fn(){
            var arr=[];
            for(var i=3; i<80; i++){
                await loadImage("./img/"+i+"-.jpg").then(function(img){
                    arr.push(img);
                });
            }
            return arr;
        }

        var s = fn();
        s.then(function(list){
            list.forEach(item=>{
                console.log(item.width,item.src);
            })
        })
            
    </script>
</body>
</html>

JohnKuo888

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
图片预加载多种实现方式

//构建Promise异步对象分别通过不同方式进行图片预加载实现 function loadImage(src){ var p = new Promise(function(resolve,reject){ var img = new Image(); img.onload=function(){ ...
复制链接

扫一扫