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宽高的更多相关文章

  1. Android如何在初始化的时候获取加载的布局的宽高

    在自定义ListView中,需要将下拉刷新的View在初始化的时候设置padding隐藏起来,这时就要在初始化的时候获得要加载的布局View的高度. private View headView; he ...

  2. js 图片加载完后的处理事件

    //图片加载完成后再显示页面 document.getElementById('icon').onload=function(){ document.getElementById('wrap').st ...

  3. 图片加载完后执行js

    <script>            window.onload=function(){                          var liwidth = $('.imgul ...

  4. JS图片加载时获取图片宽高信息

    ; var img = new Image(); img.src = node.find("img[class='img1_1']").attr("src"); ...

  5. (js有关图片加载问题)dom加载完和onload事件

    引用旺旺的话...哈哈哈DOMContentLoaded事件表示页面的DOM结构绘制完成了,这时候外部资源(带src属性的)还没有加载完.而onload事件是等外部资源都加载完了就触发的.$.read ...

  6. fackbook的Fresco (FaceBook推出的Android图片加载库-Fresco)

    [Android开发经验]FaceBook推出的Android图片加载库-Fresco   欢迎关注ndroid-tech-frontier开源项目,定期翻译国外Android优质的技术.开源库.软件 ...

  7. Fresco-FaceBook推出的Android图片加载库

    在Android设备上面,快速高效的显示图片是极为重要的.过去的几年里,我们在如何高效的存储图像这方面遇到了很多问题.图片太大,但是手机的内存却很小.每一个像素的R.G.B和alpha通道总共要占用4 ...

  8. Android图片加载库Fresco

    在Android设备上面,快速高效的显示图片是极为重要的.过去的几年里,我们在如何高效的存储图像这方面遇到了很多问题.图片太大,但是手机的内存却很小.每一个像素的R.G.B和alpha通道总共要占用4 ...

  9. FaceBook推出的Android图片加载库-Fresco

    FaceBook推出的Android图片加载库-Fresco 原文链接:Introducing Fresco: A new image library for Android 译者 : ZhaoKai ...

随机推荐

  1. JAVA 注解和反射

    通过反射来获取类 Class MyTest{ private String name; public String showName{ System.out.println(this.name); } ...

  2. 【C++】Lambda表达式

    转自 https://www.cnblogs.com/DswCnblog/p/5629165.html 作者:dsw846 C++11的一大亮点就是引入了Lambda表达式.利用Lambda表达式,可 ...

  3. M25P16中文版

    转载:https://blog.csdn.net/weiweiliulu/article/details/23666717 1.M25P16概述     M25P16是一款带有先进写保护机制和高速SP ...

  4. VMware 打开虚拟机的时候提示 internal error 内部错误 遇到这个问题时我的解决方法

    任务栏右键,启动任务管理器,选择“服务”选项卡 找到这个服务 启动这个服务后,再次尝试打开虚拟机,就OK了.

  5. OpenResty的现状、趋势、使用及学习方法

    Nginx 是俄罗斯人发明的, Lua 是巴西几个教授发明的,中国人章亦春把 LuaJIT VM 嵌入到 Nginx 中,实现了 OpenResty 这个高性能服务端解决方案. 通过 OpenRest ...

  6. 20175236 2018-2019-2 《Java程序设计》第三周学习总结

    教材学习内容总结 类与对象 类与对象的关系:要产生对象必须先定义类,类是对象的设计图,对象是类的实例 类:class是关键字,用来定义类. 类声明:例如class People. 对象的声明:类的名字 ...

  7. 继承RelativeLayout 自定义布局

    public class HomeToolbarView extends RelativeLayout { TextView tvTitle; public HomeToolbarView(Conte ...

  8. Java可视化日历(Date类、DATe Format类、Calendar类综合运用),开发可视化日历小程序

    Java时间日期类综合运用,开发可视化日历小程序 由键盘输入指定格式的日期,打印这个月的日历 1.代码 import java.text.DateFormat; import java.text.Pa ...

  9. vscode中使用beautify插件格式化vue文件

    1.点击设置,找到beautify.language并在html一栏里加上vue "beautify.language": { "js": { "ty ...

  10. LeetCode【108. 将有序数组转换为二叉搜索树】

    又是二叉树,最开始都忘记了二叉搜索树是什么意思,搜索了一下: 二叉搜索树:左节点都小于右节点,在这里就可以考虑将数组中的中间值作为根节点 平衡二叉树:就是左右节点高度不大于1 树就可以想到递归与迭代, ...