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 ...
随机推荐
- linux的常用文件系统格式
文件系统指文件存在的物理空间.在Linux系统中,每个分区都是一个文件系统,都有自己的目录层次结构.Linux的最重要特征之一就是支持多种文件系统,这样它更加灵活,并可以和许多其它种操作系统共存.Vi ...
- Tomcat基于虚拟路径的发布和web.xml配置
<Connector port="8888" protocol="HTTP/1.1" connectionTimeout="20000" ...
- odoo种种
[精]Odoo 8.0深入浅出开发教程-模块开发基础 http://blog.csdn.net/sunansheng/article/details/50864527 搭建odoo开发调试环境 htt ...
- 标准库String类
下面的程序并没有把String类的所有成员方法实现,只参考教程写了大部分重要的成员函数. [cpp] view plain copy #include<iostream> #include ...
- 获取文件的缩略图Thumbnail和通过 AQS - Advanced Query Syntax 搜索本地文件
演示如何获取文件的缩略图 FileSystem/ThumbnailAccess.xaml <Page x:Class="XamlDemo.FileSystem.ThumbnailAcc ...
- OpenCV图像的全局阈值二值化函数(OTSU)
cv::threshold(GrayImg, Bw, 0, 255, CV_THRESH_BINARY | CV_THRESH_OTSU);//灰度图像二值化 CV_THRESH_OTSU是提取图像最 ...
- FREEBSD手工配置网络
在FreeBSD系统中,网络能力十分重要,对于一个标准的FreeBSD系统,至少要有一个网络界面以便与其他计算机通信.最常见的网络界面为以太网卡.此外FreeBSD也支持Token Ring和FDDI ...
- BZOJ1257 [CQOI2007]余数之和sum
本文版权归ljh2000和博客园共有,欢迎转载,但须保留此声明,并给出原文链接,谢谢合作. 本文作者:ljh2000 作者博客:http://www.cnblogs.com/ljh2000-jump/ ...
- mybatis源码分析:
p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px "Helvetica Neue"; color: #e4af0a } p. ...
- 利用django创建一个投票网站(一)
这是教程的原始链接:http://django-intro-zh.readthedocs.io/zh_CN/latest/part1/ 创建你的第一个 Django 项目, 第一部分 来跟着实际项目学 ...