图片预加载完成再执行动画,解决动画执行时图片还未加载完成的问题_图片未加载-程序员宅基地

技术标签: js图片预加载  js  css3动画图片加载慢  

一、场景

1.多图片衔接动画

2.鼠标指向图片时,图片翻转显示另一张图

等等

 

二、实现方式

利用 Image()构造函数创建一个屏幕外图片对象,之后将该对象的src属性设置成期望的URL,由于图片元素并没有加载到文档中,因此,它是不可见的,但是浏览器还是会加载图片并将其缓存起来。这样以来,当页面中再有用到该图片的时候就能很快从缓存中加载。就不会出现加载慢导致的图片显示不出来的问题了

 

三、代码

!function(){
    var imgNeed = ['https://ss1.baidu.com/9vo3dSag_xI4khGko9WTAnF6hhy/image/h%3D300/sign=a919d7dfe524b899c13c7f385e071d59/d52a2834349b033bda94010519ce36d3d439bdd5.jpg',
                    'https://ss3.baidu.com/9fo3dSag_xI4khGko9WTAnF6hhy/image/h%3D300/sign=87d6daed02f41bd5c553eef461d881a0/f9198618367adab4b025268587d4b31c8601e47b.jpg',
                    'https://ss1.baidu.com/-4o3dSag_xI4khGko9WTAnF6hhy/image/h%3D300/sign=215774e902f41bd5c553eef461db81a0/f9198618367adab416a4888187d4b31c8601e4f8.jpg'], // 需要预加载的图片地址列表
        len = imgNeed.length,
        i = 0;

    // showLoading(); 等待弹层,在图片未完成加载时显示等待loading,避免用户进行操作
    // (按需决定添加与否,等待loading如何设置可参考:https://blog.csdn.net/web_xyk/article/details/80449752)

    function loadImg(i){
        var img = new Image();
        img.src = imgNeed[i];
        console.log(i)
        img.onload = function(){
            if(i++<len-1){
                loadImg(i)
            }else{
                console.log('图片预加载完成')
                // closeLoading(); 如果设置showLoading需要关闭等待loading
            }
        }
    }
    console.log('图片预加载开始')
    loadImg(i);
}()

 

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/web_xyk/article/details/81484500

智能推荐

YCM(YouCompleteMe)常用命令大全_youcompleteme 命令-程序员宅基地

文章浏览阅读1.7k次。一、Ycm Commands1、YcmRestartServercommandIf theycmd completion serversuddenly stops for some reason, you can restart it with this command.2、YcmForceCompileAndDiagnosticscommandCalling this command will force YCM to immediately recompile your file..._youcompleteme 命令

cad弱电走线图_POL全光网弱电设计指导-程序员宅基地

文章浏览阅读3.1k次。作为FTTH的PON产品已经进入上亿家庭了,而作为这一主流产品的行业应用POL却显得有些生疏。虽然总包集成商和业主在接触这一概念后都能很快接受,但在实际项目实施过程中,则会遇到不少的困难。弱电设计这块,就是这第一个拦路虎。POL的概念在公共建筑类为主的设计院因承接住宅类项目较少而较为陌生,另外公共建筑的结构特性较住宅更为多样,以及相比于交换机POL有更多的设计规则等原因,造成了设计院在POL的设计..._全光网络cad设备

php WordPress开发,wordpress主题如何开发-程序员宅基地

文章浏览阅读259次。虽然现在免费的Wordpress主题满天飞,但做为一个Geek你有没有考虑过写一个属于自己的Wordpress主题呢。这篇文章就教你如何从最基础开始做一个Wordpress主题。主题的文件结构:写之前首先要了解一下Wordpress主题的结构。WordPress主题放在wp-content/themes/下,做为一个独立的文件夹存在。文件夹的名字随意,但不要使用纯数字,否则会导致主题无法在主题列表..._php开发系统主题怎么实现

国标服务器GBServerPlatform对接海康摄像头的操作说明-程序员宅基地

文章浏览阅读6.9k次,点赞3次,收藏16次。这篇文章讲解一下QuickGBLink开发的国标服务器如何对接海康IPC。(GBT28181国标平台软件下载地址:https://github.com/QuickGBLink88/GB28181_ServerPlatform)一、操作步骤在一个国标系统中,包含的设备角色一般可分为:中心信令服务器、SIP设备、SIP客户端和流媒体服务器。而SIP设备也分不同类型,比如是编码设备、解码设..._gbserverplatform

linux shell中 if else以及大于、小于、等于逻辑表达式介绍_linux 等于 大于 if else-程序员宅基地

文章浏览阅读1.5k次。遍历目录下文件#!/bin/sh traverse_dir(){ for file2 in `ls -A $1` do if [ -d "$1/$file2" ];then echo "$1/$file2" list_alldir "$1/$file2"_linux 等于 大于 if else

mac mysql 密码过期_mac下连接本地安装的mysql报错提示密码过期-程序员宅基地

文章浏览阅读216次。前提:mac中之前安装了mysql,一段时间没使用,今天使用mysql客户端去连接,报错提示密码过期,原因是mysql5.7之后版本有密码过期这个功能。error:Your password has expired. To log in you must change it using a client that supports expired passwords.打开终端,启动mysql服务:..._mac your password has expired. to log in you must change it using a client t

随便推点

c语言中引用用法,C语言中的extern关键字的使用-程序员宅基地

文章浏览阅读297次。引用同一个文件中的变量看一段测试代码:#define _CRT_SECURE_NO_WARNING 1#includeint func();int main(){func();printf("%d\n", num);return 0;}int num = 4;int func(){printf("%d\n",num);return num;}这个时候一编译会发现编译器报错 如果按照这个顺序,变量 ..._extern在c语言中

J2EE架构-程序员宅基地

文章浏览阅读3.3k次,点赞2次,收藏6次。J2EE :Java 2 平台企业版(Web应用)架构分为:1.客户端浏览器(主要) , 小程序 ,传统的客户端2.Web层Servlet/JSP 界面展示涉及到的技术:HTML ,CSS, JavaScript 3.业务逻辑层Service , dao, javabean (model)4.信息系..._j2ee架构

Netty实现服务端客户端长连接通讯及心跳检测_完整netty 作为服务端检测心跳-程序员宅基地

文章浏览阅读4.1k次。通过netty实现服务端与客户端的长连接通讯,及心跳检测。 基本思路:netty服务端通过一个Map保存所有连接上来的客户端SocketChannel,客户端的Id作为Map的key。每次服务器端如果要向某个客户端发送消息,只需根据ClientId取出对应的SocketChannel,往里面写入message即可。心跳检测通过IdleEvent事件,定时向服务端放送Ping消息_完整netty 作为服务端检测心跳

【学习经典】python 数据聚合与分组运算(part 1)_python quantile 分组-程序员宅基地

文章浏览阅读6.4k次,点赞8次,收藏44次。对数据集进行分组并对各组应用一个函数(无论是聚合还是转换),通常是数据分析工作中的重要环节。在将数据集加载、融合、准备好之后,通常就是计算分组统计或生成透视表。pandas提供了一个灵活高效的gruopby功能,它使你能以一种自然的方式对数据集进行切片、切块、摘要等操作。关系型数据库和SQL(Structured Query Language,结构化查询语言)能够如此流行的原因之一就是其能够方便..._python quantile 分组

np.append-程序员宅基地

文章浏览阅读943次。import numpy as npa=[1,2,3]b=[4,5]c=[[6,7],[8,9]]d=[[10,11],[12,13]]print(type(a),type(c)) #<class 'list'> <class 'list'>print(np.append(a,b,axis=0)) #[1 2 3 4 5]print(a) #[1 2 3]print("*********************")print(np.append(._np.append

Collection接口子类之AbstractCollection(抽象类)_collection接口的抽象方法-程序员宅基地

文章浏览阅读157次。Collection接口子类之AbstractCollection(抽象类)一、概述这个抽象类提供了集合接口骨架实现,以最小化的方式实现该接口对于不可变的集合,只要继承这个类,并且提供iterator迭代器和size方法的实现即可对于可变集合,必须额外的重写add方法,提供迭代器的方法返回的迭代器必须额外实现remove方法二、构造器protected AbstractCollecti..._collection接口的抽象方法

推荐文章

热门文章

相关标签