移动web图片加载完获取img宽高
1、vue中 @load=function(){}
等待img加载完触发load函数
2、window.load=function(){var imgheight=$(".btnimg").height;}
当一个图片很大的时候这个方法将一直不执行(图片少当然看不出异常)
3、定时器循环是否图片都已经加载完全
var t_img; // 定时器
var isLoad = true; // 控制变量
//isImgLoad函数在所有图片加载完成后执行
isImgLoad(function(){
var imgheight=$(".btnimg").height; // 获取图片高度
}); // 判断图片加载的函数
function isImgLoad(callback){
// 这里需要获取的图片类名都是btnimg,只判断这些图片而不受其他大图的影响
$('.btnimg').each(function(){
// 找到为0就将isLoad设为false,并退出each
if(this.height === ){
isLoad = false;
return false;
}
});
// 如果isLoad为true,即目标图片没有发现为0的。默认为加载完毕
if(isLoad){
clearTimeout(t_img); // 清除定时器
// 回调函数
callback();
}else{
// 为false,因为找到了没有加载完成的图,将调用定时器递归
isLoad = true;
t_img = setTimeout(function(){
isImgLoad(callback); // 递归扫描,再次执行判断图片是否加载函数
},); // 我这里设置的是500毫秒就扫描一次,可以自己调整
}
}
4、图片预加载
var imgReady = (function(){
var list = [],
intervalId = null;
// 用来执行队列
var queue = function(){
for(var i = 0; i < list.length; i++){
list[i].end ? list.splice(i--,1) : list[i]();
}
!list.length && stop();
};
// 停止所有定时器队列
var stop = function(){
clearInterval(intervalId);
intervalId = null;
}
return function(url, ready, error) {
var onready = {},
width,
height,
newWidth,
newHeight,
img = new Image();
img.src = url;
// 如果图片被缓存,则直接返回缓存数据
if(img.complete) {
ready.call(img);
return;
}
width = img.width;
height = img.height;
// 加载错误后的事件
img.onerror = function () {
error && error.call(img);
onready.end = true;
img = img.onload = img.onerror = null;
};
// 图片尺寸就绪
var onready = function() {
newWidth = img.width;
newHeight = img.height;
if (newWidth !== width || newHeight !== height ||
// 如果图片已经在其他地方加载可使用面积检测
newWidth * newHeight > 1024
) {
ready.call(img);
onready.end = true;
};
};
onready();
// 完全加载完毕的事件
img.onload = function () {
// onload在定时器时间差范围内可能比onready快
// 这里进行检查并保证onready优先执行
!onready.end && onready();
// IE gif动画会循环执行onload,置空onload即可
img = img.onload = img.onerror = null;
};
// 加入队列中定期执行
if (!onready.end) {
list.push(onready);
// 无论何时只允许出现一个定时器,减少浏览器性能损耗
if (intervalId === null) {
intervalId = setInterval(queue, 40);
};
};
}
})();
http://www.cnblogs.com/tugenhua0707/p/3525668.html
移动web图片加载完获取img宽高的更多相关文章
- Android如何在初始化的时候获取加载的布局的宽高
在自定义ListView中,需要将下拉刷新的View在初始化的时候设置padding隐藏起来,这时就要在初始化的时候获得要加载的布局View的高度. private View headView; he ...
- js 图片加载完后的处理事件
//图片加载完成后再显示页面 document.getElementById('icon').onload=function(){ document.getElementById('wrap').st ...
- 图片加载完后执行js
<script> window.onload=function(){ var liwidth = $('.imgul ...
- JS图片加载时获取图片宽高信息
; var img = new Image(); img.src = node.find("img[class='img1_1']").attr("src"); ...
- (js有关图片加载问题)dom加载完和onload事件
引用旺旺的话...哈哈哈DOMContentLoaded事件表示页面的DOM结构绘制完成了,这时候外部资源(带src属性的)还没有加载完.而onload事件是等外部资源都加载完了就触发的.$.read ...
- fackbook的Fresco (FaceBook推出的Android图片加载库-Fresco)
[Android开发经验]FaceBook推出的Android图片加载库-Fresco 欢迎关注ndroid-tech-frontier开源项目,定期翻译国外Android优质的技术.开源库.软件 ...
- Fresco-FaceBook推出的Android图片加载库
在Android设备上面,快速高效的显示图片是极为重要的.过去的几年里,我们在如何高效的存储图像这方面遇到了很多问题.图片太大,但是手机的内存却很小.每一个像素的R.G.B和alpha通道总共要占用4 ...
- Android图片加载库Fresco
在Android设备上面,快速高效的显示图片是极为重要的.过去的几年里,我们在如何高效的存储图像这方面遇到了很多问题.图片太大,但是手机的内存却很小.每一个像素的R.G.B和alpha通道总共要占用4 ...
- FaceBook推出的Android图片加载库-Fresco
FaceBook推出的Android图片加载库-Fresco 原文链接:Introducing Fresco: A new image library for Android 译者 : ZhaoKai ...
随机推荐
- Linux文件夹文件改英文
打开终端,在终端中输入命令: export LANG=en_US xdg-user-dirs-gtk-update 跳出对话框询问是否将目录转化为英文路径,同意并关闭. 在终端中输入命令: expor ...
- py-day4-1 python reduce函数
from functools import reduse 从模块中导入 reduce函数: 处理一个序列,然后把序列进行合并操作 #**** 问题:求1+2+3+100的和是多少? # 一,原始 ...
- 【转】Linux环境进程间通信(五) 共享内存(上)
转自:https://www.ibm.com/developerworks/cn/linux/l-ipc/part5/index1.html 采用共享内存通信的一个显而易见的好处是效率高,因为进程可以 ...
- bsdiff差分算法
bsdiff的基本原理 bsdiff是由Conlin Percival开源的一个优秀的差分算法,而且是跨平台的.在Android系统中所使用的imgdiff本质上就是bsdiff. bsdiff的依据 ...
- php+redis实现消息队列
参考:http://www.cnblogs.com/lisqiong/p/6039460.html 参考:http://blog.csdn.net/shaobingj126/article/detai ...
- windows旋转屏幕快捷键配置
1.打开屏幕分辨率 2.高级设置 3.英特尔核心显卡控制板 4.图形属性 5.选项和支持 6.管理快捷键(启用.禁用)
- python的列表综合list-comprehension示例,及两列表取补集
两个目的: 1. 了解了python的list comprehesion的用法 2. 了解了两个列表取交集和补集的方法 R语言取交集和补集更简单,直接有函数. perl 稍麻烦一些, 关键是用hash ...
- [UE4]显示落地箭头
一.Set Hidden in Game:隐藏对象 Propagate to Children:是否修改容器子对象的可见性. 二.添加2个Static Mesh,分别命名为:StaitcMeshArr ...
- net start mysql意外终止1607
以下个人见解,错了请指出,谢谢 问题:安装了mysql,看到别人都用net start mysql来启动mysql服务,结果我打开cmd,用net start mysql 就会出问题.在网上查资料,好 ...
- 洛谷题解 CF777A 【Shell Game】
同步题解 题目翻译(可能有童鞋没读懂题面上的翻译) 给你三张牌0,1,2. 最初选一张,然后依次进行n次交换,交换规则为:中间一张和左边的一张,中间一张和右边一张,中间一张和左边一张...... 最后 ...