图片的预加载, 图片替换等操作

最新推荐文章于 2024-01-12 08:23:39 发布

原创最新推荐文章于 2024-01-12 08:23:39 发布 · 704 阅读

0 ·

CC 4.0 BY-SA版权

JS 同时被 3 个专栏收录

45 篇文章

订阅专栏

Html

12 篇文章

订阅专栏

前端性能优化

1 篇文章

订阅专栏

本文探讨了图片预加载的重要性，旨在提高页面流畅性。通过JavaScript的Image对象，可以预先下载并缓存图片，避免HTTP请求延迟。文章介绍了批量缓存图片的实现方法，并讨论了如何利用onload和onerror事件监听图片加载状态，确保后续处理的准确性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

目的

如果一个img的src需要从一个url转换到另一个url的话,它会再发出一个http请求去下载图片. 但是如果我们提前在js中下载缓存好这个图片的话,他会直接从缓存中获取,并不需要等待请求回返的过程,这样就提高了流畅性.
一个图片转换到另一个图片的话

源码

网上说有三种方式实现预加载.
我们只需要研究明白一个即可, 即可以采用js的image对象, 对它提前进行缓存

批量缓存图片

我们提前定义函数

<script>
    function preloadImage(urlArray)
    {
        if (urlArray && urlArray instanceof Array)
        {
            for (var index=0; index<urlArray.length; index++)
            {
                var image = new Image();
                image.src = urlArray[index];
            }
        }
    }

    var urlArray = [];
    urlArray.push('http://img0.bdstatic.com/img/image/shouye/xinshouye/weimeisy1.jpg');
    urlArray.push('http://img0.bdstatic.com/img/image/chongwu01.jpg');
    urlArray.push('http://img0.bdstatic.com/img/image/zhaoliying01-1.jpg');
    preloadImage(urlArray);
</script>

<a href="#" onmouseover="document.getElementById('image').setAttribute('src', 'http://img0.bdstatic.com/img/image/shouye/xinshouye/weimeisy1.jpg')">鼠标放上去,图片会改变,并不会请求图片</a>
<image src="http://img0.bdstatic.com/img/image/chongwu01.jpg" id="image"></image>

更高级

上面的方法实现了最基本的预加载图片，
但实际情况下,我们往往需要确切的知道图像是否被真正加载完成，并可能在后续执行一系列对图片的操作功能。
我们可以使用onload和onerror事件去处理决定图片是否加载完成（或者失败）

    <script>
    function preloadImage(urlArray, callback)
    {
        if (urlArray && urlArray instanceof Array)
        {
            for (var index=0; index<urlArray.length; index++)
            {
                var image = new Image();
                image.src = urlArray[index];

                if (callback && typeof callback === 'function')
                {
                    callback.call(image);
                }
            }
        }
    }

    //定义callback,对图片进行操作
    function imageOperation()
    {
        // Image对象的complete 属性可以用来检测图像是否加载完成(可以进行默认图片显示);
        // 当图像处于装载过程中时，该属性值false,
        // 当发生了onload、onerror、onabort中任何一个事件后，该属性变为true, 表示图像装载过程结束（不管成没成功），
        if (!this.complete)
        {
            console.dir('图片正在加载');
        }

        //图片已加载的事件
        this.onload = function()
        {
            alert('图片已加载');
            //然后可以设置图片的高度等属性
        }
        //图片加载失败的事件, 然后替换图片
        this.onerror = function()
        {
            alert(this.src + '图片加载失败');
            this.src = 'http://img0.bdstatic.com/img/image/zhaoliying01-1.jpg';
        }
        //图片加载停止的事件, 然后替换图片
        this.onabort = function()
        {
            alert(this.src + '图片停止加载');
            this.src = 'http://img0.bdstatic.com/img/image/zhaoliying01-1.jpg';
        }

    }


    var urlArray = [];
    urlArray.push('http://img0.bdstatic.com/img/image/shouye/xinshouye/weimeisy1.jpg');
    urlArray.push('http://img0.bdstatic.com/img/image/chongwu01.jpg');
    urlArray.push('http://img0.bdstatic.com/img/image/zhaoliying01-1.jpg');
    preloadImage(urlArray, imageOperation);

    //上面的方法实现了最基本的预加载图片，
    //但实际情况下,我们往往需要确切的知道图像是否被真正加载完成，并可能在后续执行一系列对图片的操作功能。
    // 我们可以使用onload和onerror事件去处理决定图片是否加载完成（或者失败）
</script>

<a href="#" onmouseover="document.getElementById('image').setAttribute('src', 'http://img0.bdstatic.com/img/image/shouye/xinshouye/weimeisy1.jpg')">鼠标放上去,图片会改变,并不会请求图片</a>
<image src="http://img0.bdstatic.com/img/image/chongwu01.jpg" id="image"></image>