如何实现图片的异步加载

最新推荐文章于 2024-02-28 17:15:11 发布

lala_shine

最新推荐文章于 2024-02-28 17:15:11 发布

阅读量7.6k

点赞数 1

分类专栏： javascript 文章标签： js

本文链接：https://blog.csdn.net/u013594477/article/details/79459341

版权

javascript 专栏收录该内容

45 篇文章 1 订阅

订阅专栏

1.概述

异步加载：也称为图片的预加载。利用js代码提前加载图片，用户需要时可以直接从本地缓存获取，但是会增加服务器前端的压力。这样做可以提高用户的体验，因为同步加载大图片的时候，图片会一层一层的显示处理，但是经过预加载后，直接显示出整张图片。但是在图片响应时间上优化不是那么明显。

2.基本形式

<script>
        function loadImage(id,url,callback)
        {
            var img = new Image();
            img.src = url;

            // 图片存在缓存中
            if(img.complete){
                callback(id,url);
                return;
            }
            // 图片加载到浏览器的缓存中回调函数
            img.onload = function(){
                callback(id,url);
            }

        }
</script>

3.应用
利用预加载显示3张1980*1080的图片，正常加载的话会慢慢显示出来。而用预加载的话，等一会3张基本同时显示出来。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div id="img_box">
        <img data-src="http://wozien.com/img/1.jpg" alt="">
        <img data-src="http://wozien.com/img/2.jpg" alt="">
        <img data-src="http://wozien.com/img/3.jpg" alt="">
    </div>

    <script>
        function loadImage(obj,url,callback)
        {
            var img = new Image();
            img.src = url;

            // 判断图片是否在缓存中
            if(img.complete){
                callback.call(img,obj);
                return;
            }

            // 图片加载到浏览器的缓存中回调函数
            img.onload = function(){
                callback.call(img,obj);
            }
        }

        function showImage(obj){
            obj.src = this.src;
        }

        var imgs = document.querySelectorAll('img');
        for(var i = 0;i<imgs.length;i++)
        {
            var url = imgs[i].dataset.src;
            loadImage(imgs[i],url,showImage);
        }
    </script>
</body>
</html>

lala_shine

关注

1
点赞
踩
6

收藏

觉得还不错? 一键收藏
1
评论
如何实现图片的异步加载

1.概述异步加载：也称为图片的预加载。利用js代码提前加载图片，用户需要时可以直接从本地缓存获取，但是会增加服务器前端的压力。这样做可以提高用户的体验，因为同步加载大图片的时候，图片会一层一层的显示处理，但是经过预加载后，直接显示出整张图片。但是在图片响应时间上优化不是那么明显。2.基本形式&lt;script&gt; function loadImage(id,u...
复制链接

扫一扫