美文网首页
图片预加载

图片预加载

作者: TRYao | 来源:发表于2018-07-24 17:04 被阅读0次

预加载图片是提高用户体验的一个很好方法。图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度。这对图片画廊及图片占据很大比例的网站来说十分有利,它保证了图片快速、无缝地发布,也可帮助用户在浏览你网站内容时获得更好的用户体验。

<script type="text/javascript">
        // 所有的图片
        const imgs = [
            "https://wx2.sinaimg.cn/mw690/62037b5agy1fow7y3pxpzj209n0b6aap.jpg",
            "https://wx2.sinaimg.cn/mw690/62037b5agy1fow7y3slwej20gm0ha3zy.jpg",
            "https://wx2.sinaimg.cn/mw690/62037b5agy1fow7y3slwej20gm0ha3zy.jpg",
            
        ];
        let len = imgs.length;
        /**
         * 遍历imgs数组,有序将所有图片加载出来
         * 可以通过控制台查看网络请求,会发现所有图片均按顺序加载
         */
        let count = 0;
        load();

        function load() {
            var imgObj = new Image();
            imgObj.src = imgs[count];

            imgObj.onerror = function () { 
                console.log(count);
                if (count >= len) {
                    console.log('加载完毕');
                } else {
                    load(); // 继续加载下一张
                }

                count++;
            };
        }
    </script>

相关文章

  • js-事件委托&图片预加载

    事件委托 图片预加载 吸顶条 图片预加载

  • 图片预加载

    背景 利用图片的预加载技术获得更好的用户体验 什么是有序预加载和无序预加载 jQuery插件的写法 图片预加载,预...

  • JS

    JS 懒加载,预加载 概念:懒加载也叫延迟加载:JS图片延迟加载,延迟加载图片或符合某些条件时才加载某些图片。预加...

  • 图片懒加载

    懒加载与预加载的基本概念。 懒加载也叫延迟加载:JS图片延迟加载 延迟加载图片或符合某些条件时才加载某些图片。 预...

  • 前端图片加载优化

    预加载 图片预加载可以提高用户体验,对于图片画廊和图片占比很大的网页内容尤其重要 css预加载 利用css的bac...

  • 【JS】图片预加载--无序加载网站loading

    课程前言: 慕课网 --图片预加载 图片预加载的特点: ( 1、网站的Loading页 2、局部图片的加载--表情...

  • JavaScript--预加载与延迟加载

    JavaScript--预加载与延迟加载 1. 预加载:就是页面打开,图片什么的都加载好了(优先显示图片) 2. ...

  • 图片的预加载与懒加载

    图片预加载与懒加载 由名字可以知道,图片的预加载->当用户需要查看图片可以直接从本地缓存中取到(提前加载下来的),...

  • 2018-07-27

    JS实现图片预加载

  • 图片预加载、瀑布流+图片预加载

    图片预加载 图片预加载是为了解决网络卡等一些其他情况造成该显示的图片不能及时的显示,但为了提高网页的完整性,给未能...

网友评论

      本文标题:图片预加载

      本文链接:https://www.haomeiwen.com/subject/vpdymftx.html