2013年09月10日 03:04:13

jquery监控图片加载是否完成

作者: 

本文提供jQuery监控图片加载是否完成的处理方法。

  1. //监控所有图片的加载情况
  2. $("img").each(function(index, el) {
  3. $(this).load(function() {
  4. alert('图片'+$(el).attr('src')+'成功加载!');
  5. }).error(function(){
  6. //这里可以做进一步处理,如通过Ajax转换地址读取另一个图片服务器的数据
  7. alert('图片'+$(el).attr('src')+'加载失败!');
  8. });
  9. });
   一个例子
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <script type="text/javascript" src="http://zjmainstay.cn/jquerylib/jquery-1.8.2.min.js"></script>
  5. <script type="text/javascript">
  6. $(function(){
  7. var imgs = [
  8. "http://himg.bdimg.com/sys/portrait/item/9b825a6a6d61696e737461790a1c.jpg",
  9. "http://4.su.bdimg.com/icon/weather/48_48/a0.jpg"
  10. ];
  11. for(var i=0;i<imgs.length;i++){
  12. //直接将图片插入到body中,初始化时隐藏,加载完成才显示
  13. $("<img style='width:200px; height:200px;' class='appendImg'/>").attr("src", imgs[i]).hide().appendTo($("body"));
  14. }
  15. //这个要放在后面,监控appendImg图片加载
  16. $(".appendImg").on('load',function(){
  17. $(this).show(); //加载完成才显示
  18. });
  19. });
  20. </script>
  21. </head>
  22. <body>
  23. </body>
  24. </html>


未经同意禁止转载!
转载请附带本文原文地址:jquery监控图片加载是否完成,首发自 Zjmainstay学习笔记
阅读( 5672 )
看完顺手点个赞呗:
(2 votes)
更多当前分类内容: jQuery live 替代方案 »

1.PHP cURL群:PHP cURL高级技术
2.正则表达式群:专精正则表达式
3. QQ联系(加请说明):QQ联系博主(951086941)
4. 邮箱:zjmainstay@163.com
5. 打赏博主:

网站总访问量: