图片预加载的那些事儿

最新推荐文章于 2024-05-08 21:14:37 发布

输出是最好的学习

最新推荐文章于 2024-05-08 21:14:37 发布

阅读量2.9k

点赞数 2

分类专栏：前端文章标签：预加载

本文为博主原创文章，转载请注明出处。

本文链接：https://blog.csdn.net/m0_37568521/article/details/78556454

版权

前言：最近在给一个创业公司做一个官网，涉及到很多图片，加载速度不给力，用户体验很差。因此自己这次就采用了图片预处理，在网上也看了一些其他大佬的博客，收获很多，在这里总结一下，分享给大家。

1、什么是图片预加载

简单的来说，图片预加载就是我们在浏览到图片之前，就已经加载好了，不用再担心我们浏览图片的时候，出现卡死或者白条的情况。其中图片预加载也分为三种，第一种是无序加载，也就是加载不分顺序，你给我加载完就行，我们在打开有些网站的时候会遇到先转几圈再显示，这里就用到了无序加载。第二种就是有序加载，也就是按照先后顺序来加载，这里可以在有些翻页的地方使用，我们从前向后一页一页的翻，图片也就一页一页的预加载。第三种就是基于用户行为的预加载，也就是我们去点击某个按钮或者滚动的时候进行加载，首先我们来一个对照组，后面通过实验组来进行对比。（下面代码复制可直接运行）

2、普通加载

通过下面代码，我们清空浏览器缓存以后可以知道，当我们在点击下一页或者上一页的时候，才进行图片加载，很容易出现白条或者卡死状态。后面我们对其进行优化。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>普通加载</title>
    <style>
        .content{
            width: 800px;
            height: 400px;
            margin: 0 auto;
        }
        img {
            width: 100%;
            height: 100%;
        }
        .btn-div {
            margin-top: 30px;
            text-align: center;
        }
        button {
            padding: 10px 20px;
            width: 100px;
            background-color: #cdcdcd;
            border: none;
            margin: 0 20px;
            outline: none;
        }
        button:hover {
            color: white;
            cursor: pointer;
            background-color: orange;
        }
    </style>
</head>
<body>
    <div class="content">
        <img src="http://www.boyalibrary.com/dist/08fa276c6fcc523c9e134a6eeea56a39.jpg" />
    </div>
    <div class="btn-div">
        <button class="pre">上一页</button>
        <button class="next">下一页</button>
    </div>
    <script type="text/javascript">
        window.onload = function() {
    
            // 定义需要遍历的图片数组
            var imgs = [
                '08fa276c6fcc523c9e134a6eeea56a39.jpg',
                '15f913bf2a8158220dca1fda61e6fe82.jpg',
                '825bd9f1e267b7ebadff9b5e6fbd79f7.jpg',
                '86793912ba0e2872126b3717752a08dd.jpg',
                'c835cc910976860779f38256b9f843f2.jpg',
                'c5396d5ae4bf830fed68690c8e828f9c.jpg',
                'ca8cc741192afe181d68a47092693b4c.jpg'
            ];
            // 获取上一页的DOM
            var oPre = document.querySelector(".pre");
            // 获取下一页的DOM
            var oNext = document.querySelector(".next");
            // 获取图片的DOM
            var oImg = document.getElementsByTagName("img")[0];
            // 定义当前是第几张
            var currentIndex = 0;
            var imgLength = imgs.length;
            // 上一页点击事件
            oPre.onclick = function() {
    
                currentIndex = currentIndex === 0 ? imgLength-1 : --currentIndex;
                // 更换图片的src
                tab(currentIndex);
            };
            // 下一页点击事件
            oNext.onclick = function() {
    
                currentIndex = currentIndex === imgLength-1 ? 0 : ++currentIndex;               
                tab(currentIndex);
            };
            // 更换图片的src函数

最低0.47元/天解锁文章

输出是最好的学习

关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
图片预加载的那些事儿

前言：最近在给一个创业公司做一个官网，涉及到很多图片，加载速度不给力，用户体验很差。因此自己这次就采用了图片预处理，在网上也看了一些其他大佬的博客，收获很多，在这里总结一下，分享给大家。1、什么是图片预加载简单的来说，图片预加载就是我们在浏览到图片之前，就已经加载好了，不用再担心我们浏览图片的时候，出现卡死或者白条的情况。其中图片预加载也分为三种，第一种是无序加载，也就是加载不分顺序，你给我加载完就
复制链接

扫一扫