JS实现图片的异步加载

来源：互联网发布：今日头条mac客户端编辑：程序博客网时间：2024/05/22 09:00

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>

data-*是html5的新特性，其他不兼容的浏览器可以设置default属性为想要的图片url值。

0 0