js加载完所有的图片,适合电子相册哦~~~~
有些时候要一口气加载完所有的图片,所以代码就要这么写。。。。
var imgArray = [
'http://s16.mogucdn.com/p1/160202/upload_ifqwcmlcmyywmnrxgyzdambqgyyde_750x1206.jpg',
'https://img.alicdn.com/tps/TB19uTbLpXXXXaEaXXXXXXXXXXX-520-280.jpg',
'http://s18.mogucdn.com/p1/160203/upload_ifqwizbthaztgyzxgyzdambqgyyde_666x610.png',
'http://s18.mogucdn.com/p1/160203/upload_ifrdcmlcge4tgyzxgyzdambqmeyde_743x242.png',
'http://imgsrc.baidu.com/forum/pic/item/8d5494eef01f3a2957d7fc4a9925bc315c607c12.jpg',
'http://img.bizhi.sogou.com/images/2013/01/29/330291.jpg',
'http://s16.mogucdn.com/p1/160202/upload_ie4wmzbwmvsdcobxgyzdambqgqyde_750x1334.gif',
'http://s16.mogucdn.com/p1/160202/upload_ifqwcmlcmyywmnrxgyzdambqgyyde_750x1206.jpg',
'http://s18.mogucdn.com/p1/160203/upload_ifqwizbthaztgyzxgyzdambqgyyde_666x610.png',
'http://s18.mogucdn.com/p1/160203/upload_ifrdcmlcge4tgyzxgyzdambqmeyde_743x242.png',
'http://s16.mogucdn.com/p1/160201/upload_ifrwinrugntdqmzxgyzdambqhayde_750x1206.jpg',
'http://s16.mogucdn.com/p1/160202/upload_ie4wmzbwmvsdcobxgyzdambqgqyde_750x1334.gif'
]; function imgLoad(url,callback) {
var img = new Image();
img.src = url;
if (img.complete) {
if(typeof(callback)==='function') callback();
} else {
img.onload = function () {
if(typeof(callback)==='function') callback();
img.onload = null;
};
}
} function preImgLoad(array,callback){
var index = 0;
while(index < array.length){
if(index==array.length-1){
imgLoad(array[index],callback)
}else{
imgLoad(array[index],array[index+1])
}
index ++;
}
} preImgLoad(imgArray,function(){console.log('图片已经全部加载成功')})
睡觉去。。。。
js加载完所有的图片,适合电子相册哦~~~~的更多相关文章
- web项目中js加载慢问题解决思路
最近使用Echarts地图(版本为echarts2,echarts3目前无法下载地图版). 问题描述:之前使用require形式加载,地图首次加载显示要6-7秒,难以接受. js配置代码如下: < ...
- jquery的ready方法(DOM是否加载完)详解与使用
jquery的ready方法(准备DOM触发)还是比较复杂的,我们先看流程图:
- js图片未加载完显示loading效果
<html> <title>js图片未加载完显示loading效果</title> <body> <style> img{float:lef ...
- (js有关图片加载问题)dom加载完和onload事件
引用旺旺的话...哈哈哈DOMContentLoaded事件表示页面的DOM结构绘制完成了,这时候外部资源(带src属性的)还没有加载完.而onload事件是等外部资源都加载完了就触发的.$.read ...
- pyspider 示例二 升级完整版绕过懒加载,直接读取图片
pyspider 示例二 升级完整版绕过懒加载,直接读取图片,见[升级写法处] #!/usr/bin/env python # -*- encoding: utf-8 -*- # Created on ...
- 网页图片很多时,加载完后再加载图片(defer:延迟加载)
图片影响页面加载速度,可以先加载完页面,再去加载图片. defer:告诉浏览器,这里面的js代码不影响网页脚本解析,可以解析完html脚本再执行这段js代码(个人理解). 网页代码:<img s ...
- js判断图片加载完成后获取图片实际宽高
通常,我们会用jq的.width()/.height()方法获取图片的宽度/高度或者用js的.offsetwidth/.offsetheight方法来获取图片的宽度/高度,但这些方法在我们通过样式设置 ...
- 移动web图片加载完获取img宽高
1.vue中 @load=function(){} 等待img加载完触发load函数 2.window.load=function(){var imgheight=$(".btnimg& ...
- js页面加载完后执行(document.onreadystatechange 和 document.readyState)
js页面加载完后执行javascript(document.onreadystatechange 和 document.readyState) document.onreadystatechange ...
随机推荐
- ActiveMQ在Linux中的安装
1.下载相关activeMQ安装包 下载路径:http://activemq.apache.org/download.html 下载最新安装包,选择Linux版进行下载 2.解压重命名 (1)解压: ...
- 提高前端开发效率必备AngularJS (基础)
简介 AngularJS 是一个为动态WEB应用设计的结构框架,提供给大家一种新的开发应用方式,这种方式可以让你扩展HTML的语法,以弥补在构建动态WEB应用时静态文本的不足,从而在web应用程序中使 ...
- vue.js之过渡效果-css
概述 vuejs的过渡效果可以让我们的页面元素在出现和消失时实现过渡.官方文档这样描述过渡效果的方式: 在 CSS 过渡和动画中自动应用 class 可以配合使用第三方 CSS 动画库,如 Anima ...
- OBS MAC 系统开发(基于mac OS X 10.12)
按照github 上的说明,安装配套软件,和跟踪需要的库 推荐使用homebrew 来安装各种依赖库. 安装Qt后,要配置系统变量 ,这个困扰本人很久:) 成功编译 cmake .. &&am ...
- 浅谈servlet
刚开始接触servlet的时候,其实不是太理解servlet的,后来经过慢慢摸爬滚打式的的学习,有了一点自己的理解. servlet的产生还要从Java和HTTP说起: Java的servletAPI ...
- linux系统下使用xampp 丢失mysql root密码【xampp的初始密码为空】
如果在ubuntu 下面 使用xampp这个集成开发环境,却忘记mysql密码. 注:刚安装好的xampp的Mysql初始密码是空... 找回密码的步骤如下: 1.停止mysql服务器 sudo /o ...
- HTML5学习总结-番外05 移动终端适配
一 viewport 在使用移动端设备浏览网页时,移动端浏览器是直接把整个页面放到一个虚拟的视图里来显示的,通常来说这个虚拟的视图大小会比手机屏幕大,用户可以通过手势操作来平移.缩放这个视图. 如果不 ...
- WinForm------DateEdit属性设置
1.只能选择年份属性设置
- 502 Bad Gateway深究
早上收到502报警,设置的报警规则是502错误两分钟超过500就报警. 排障流程: 日志分析系统报障-->查看日志系统日志-->nginx错误日志-->php错误日志-->ph ...
- hibernate学习一(hibernate简介与准备)
一.hibernate简介 Hibernate是一个开放源代码的对象-关系映射(Object/Relational Mapping 即 ORM)框架,它对JDBC进行了非常轻量级的对象封装,它将POJ ...