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. Redis 单机部署

    参考文章: https://www.cnblogs.com/zy-303/p/10273167.html#_label0 https://blog.csdn.net/linyifan_/article ...

  2. Nginx的编译安装及选项

    编译安装Nginx1.安装常见的工具和库(GCC.PCRE.zlib.OpenSSL) Nginx是一个由C语言编写的,所以需要一个编译工具如GNU的GCC[root@www ~]# yum inst ...

  3. 使用Dockerfile创建镜像

    Dockerfile是一个文本格式的配置文件,用户可以使用Dockerfile来快速创建自定义的镜像. 一.基本结构 Dockerfile由一行行命令语句组成,并且支持以#开头的注释行. 一般而言,D ...

  4. 转载:mongodb的两阶段提交实战

    项目中用到了mongodb(3.x版本),业务上需要操作mongodb的多个collections,希望要么同时操作成功,要么回滚操作保持数据的一致性,这个实际上要求在mongodb上实现事务功能,在 ...

  5. MySQL-exists和in的区别

    SQL查询中in和exists的区别分析 对于一些不可不免的查询场景,我们难免要用到子查询 那么in和exists那个的效率更高一点呢 SQL查询中in和exists的区别分析 select * fr ...

  6. axublogcms1.1.0 Getshell

    axublogcms1.1.0 Getshell 代码执行漏洞 现在最新版是1.1.0   今天重新审计了下 axublogcms1.0.6 ,发现一处计较鸡肋的漏洞,因为并不是只有1.0.6版本存在 ...

  7. windows下共享式服务开发

    参考: https://blog.csdn.net/dongyewolong/article/details/8164873 https://blog.csdn.net/qwertyupoiuytr/ ...

  8. Linux SVN 操作详解(转)

    1.将文件checkout到本地目录 svn checkout path(path是服务器上的目录)   例如:svn checkout svn://192.168.1.1/pro/domain    ...

  9. cgi fast-cig php-fpm

    cgi 通用网关接口,接受到动态请求,web服务器会根据这次请求的内容,然后会fork一个新进程来运行, 这个进程会把处理完的数据返回给web服务器,最后web服务器把内容发送给用户,刚才fork的进 ...

  10. Navicat操作SQL server 2008R2文件.bak文件还原

    项目操作过程中,利用Navicat操作SQL Server2008R2数据备份,结果发现数据丢失了很多,不得不先对数据丢失部分进行差异对比,然后再重新输入. 1.利用Navicat导出的数据格式为sq ...