图片预加载。懒加载

最新推荐文章于 2022-01-08 17:20:38 发布

。。媛。。

最新推荐文章于 2022-01-08 17:20:38 发布

阅读量151

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/caoyuan258/article/details/110734463

版权

图片预加载

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
</head>

<body>
    <img id="img1" src="images/c.png" style="cursor:pointer" />
</body>
<script type="text/javascript">
    /*
    			预加载：提前加载图片，当用户需要查看时可直接从本地缓存中渲染。 
    			预加载是牺牲服务器前端性能，换取更好的用户体验，这样可以使用户的操作得到最快的反映。 
    			实现预加载常用方式是：new Image()。 
    			Image对象的src属性 : 当我们给Image对象的src属性赋值一个url的时候，这个Image对象就去会加载url资源，加载完成以后的资源被保存到浏览器的缓存文件夹里面，
    			下次如果我们要去调用这个url地址的时候，直接是从缓存文件夹读取到的，所以速度很快。
    		*/
    /* 
     * 当前页思路：
     * 	图片数据存储在数组中。当打开页面后，先加载第一张图片，给用户查看，同时去加载剩下的图片，而不是一次性加载所有的图片。
     * 		提示：在js中，需要多少预加载图片，就创建多少image对象，再为每个image对象添加图片的src，此时图片也会被提前请求。
     * 	被加载的图片放在浏览器缓存里，如果没有操作，并不会影响页面的呈现。只有我们去调用加载进来的图片的src属性时，才会用到缓存中的图片。
     */

    var imgArr = ['images/1.jpg', 'images/9.jpg', 'images/243660.jpg', 'images/248967.jpg', 'images/284785.jpg', 'images/285684.jpg']

    window.onload = preLoad();

    //  实现预加载
    var cutIndex = 0;

    function preLoad() {
   
        var imageObj = new Image();
        if (cutIndex < imgArr.length) {
   
            imageObj.src = imgArr[cutIndex];
            cutIndex++;

            preLoad()
        }
    }


    var img1 = document.getElementById('img1');

    var index = 0;
    img1.onclick = function() {
   
        img1.src = imgArr[index++];
    }
</script>

</html>

图片懒加载

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			* {
   
				margin: 0;
				padding: 0;
			}
			
			img {
   
				display: block;
			}
			
			#ul1 {
   
				width: 808px;
				margin: 0 auto

最低0.47元/天解锁文章

。。媛。。

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
图片预加载。懒加载

图片预加载<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title></title></head><body> <img id="img1" src="images/c.png" style="cursor:pointer" /></body><script type="text/ja
复制链接

扫一扫

专栏目录