1. <!DOCTYPE>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title></title>
  6.  
  7. </head>
  8. <body>
  9.  
  10. <img id="mainPic" src="http://img1c.xgo-img.com.cn/pics/1843/b1842753.jpg" />
  11.  
  12. <script>
  13.  
  14. loadingImg('http://img1c.xgo-img.com.cn/pics/1843/b1842753.jpg',getWH);
  15.  
  16. function getWH(){
  17. set(this.width, this.height)
  18. }
  19.  
  20. function loadingImg(url,fun){
  21. var _Img = new Image();
  22. _Img.src = url;
  23. /*判断是否已加载*/
  24. (_Img.complete) ? fun.apply(_Img,arguments) : _Img.onload = fun;
  25. }
  26.  
  27. function set(w,h){
  28. console.log(w,h)
  29. }
  30. </script>
  31. </body>
  32. </html>

js判断图片加载完成的更多相关文章

  1. js判断图片加载完成后获取图片实际宽高

    通常,我们会用jq的.width()/.height()方法获取图片的宽度/高度或者用js的.offsetwidth/.offsetheight方法来获取图片的宽度/高度,但这些方法在我们通过样式设置 ...

  2. JS判断图片加载完成方法

    javascipt原生方法 选取指定ID的图片,通过onload指定回调方法,在图片加载完成后弹出“图片加载已完成”字样提示. <img id="pic1" src=&quo ...

  3. nginx实现动态分离,解决css和js等图片加载问题

    改帖专门为使用nginx,通过nginx把请求转发到web服务器再返回客户端的时候,解决css和js和图片加载不出来的问题. 如果没安装nginx,请访问一下地址进行安装 http://www.cnb ...

  4. JS判断页面加载完毕

    //JS判断页面加载完毕,再隐藏加载效果层,一个简单的JS加载效果. document.onreadystatechange = function () { if (document.readySta ...

  5. 判断图片加载完成,自适应iframe高度

    在做RSS订阅的时候遇到这样一个问题:点击文章标题时,弹出文章的详细界面.本来打算直接用弹出div层来显示文章的内容,但是设置div的overflow:scroll滚动条不好看,还有就是在androi ...

  6. js判断页面加载完毕方法

    判断页面加载完成这个方法是很常见的,下面有三个常用的方法,各有利弊. 一.纯js方法 // (1).页面所有内容加载完成执行 window.onload = function(){ } // (2). ...

  7. js img图片加载失败,重新加载+断网检查

    我们常常会遇到img加载图片的时候因为网络问题或者图片过大导致图片加载失败的问题,页面就因为这张蹦掉的图变得不美观.所以我们需要图片加载失败的时候重新加载图片,前端图片加载优化 //js方法定义 fu ...

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

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

  9. js实现图片加载特效(从左到右,百叶窗,从中间到两边)

    /* 网上百度的,感觉”从中间到两边“的效果写的不是很好,改了一下,感觉可以了!*/<html> <head> <title></title> < ...

随机推荐

  1. PureComponent下setstate不重新渲染

    https://blog.csdn.net/zhangheli123456/article/details/85053210 可以将  PureComponent 换成React.Component ...

  2. Poj 3261 Milk Patterns(后缀数组+二分答案)

    Milk Patterns Case Time Limit: 2000MS Description Farmer John has noticed that the quality of milk g ...

  3. (30)打鸡儿教你Vue.js

    Vue+Webpack 1.对es6语法有基本了解 2.了解前端工程化 3.了解vuejs 1.通过webpack搭建vue工程workflow 2.哪些是学习vue的重点 3..vue文件开发模式 ...

  4. A. Vasya and Book ( Codeforces Educational Codeforces Round 55 )

    题意:当前在看书的第 x 页,每次可以向前或者向后翻 d 页,这个书一共 n 页,问能否用最小操作翻到第 y 页. 题解:三种情况:1.直接翻能到的一定最短. 2.先翻到第一页,然后往后翻,翻到第 y ...

  5. 第12组 Alpha冲刺(2/6)

    Header 队名:To Be Done 组长博客 作业博客 团队项目进行情况 燃尽图(组内共享) 展示Git当日代码/文档签入记录(组内共享) 注: 由于GitHub的免费范围内对多人开发存在较多限 ...

  6. SpringMVC从Session域中获取值

    SpringMVC从Session域中获取值 SpringMVC环境自行搭建 第一步:前端页面 第二步.后台代码 第三步.响应视图 第四步.在当前处理器所在的类设置@SessionAttributes ...

  7. 在Kaggle免费使用GPU训练自己的神经网络

    Kaggle上有免费供大家使用的GPU计算资源,本文教你如何使用它来训练自己的神经网络. Kaggle是什么 Kaggle是一个数据建模和数据分析竞赛平台.企业和研究者可在其上发布数据,统计学者和数据 ...

  8. [转]IDE 、SATA、SCSI 的区别

    IDE IDE的英文全称为“Integrated Drive Electronics”,即“电子集成驱动器”,它的 本意是指把“硬盘控制器”与“盘体”集成在一起的硬盘驱动器 .把盘体与控制器集成在 一 ...

  9. ajax上传图片报错TypeError: 'append' called on an object that does not implement interface Fo

    使用FormData时报错:TypeError: 'append' called on an object that does not implement interface FormData 解决办 ...

  10. XAMPP+TestLink

    XAMPP(Apache+MySQL+PHP+PERL)是一个功能强大的建站集成软件包.这个软件包原来的名字是 LAMPP,但是为了避免误解,最新的几个版本就改名为 XAMPP 了.它可以在Windo ...