PHP学习_PHP技术_PHP网站建设_PHP程序员专注于PHP技术研究及学习

Adophper » 前端设计 » jquery判断全部图片加载完,ajax加载图片,image()例子

jquery判断全部图片加载完,ajax加载图片,image()例子

今天在做jquery相册的时候,点击过快会造成图片不显示 因为图片地址是经过jquery ajax从数据中获取的地址,操作过快直接导致图片宽度和高度为0px; 在加载之前我处理过图片的信息,就是宽度和高度的的问题,如果过大会通过image()来处理,当过快就是没有处理完,直接显示“0px"了 最后查看了相关的资料通过以下方法解决了ajax加载图片无法完全加载的问题. 首先来看一下百度知道里面的提问 [php] 我用ajax请求服务器端返回了一个数组,里面是图片的src array( 'src1', 'src2' ... ) ajax返回成功后要在页面上用这些src生成新的img元素,我想在这些新生成的img都加载完之后,执行一些动作,该怎么做呢? 求教!!谢谢 [/php] 回答: [php] 先一个个push去插入图片,在最后个图片时,触发判断加载函数; 在函数里边去加载最后个图片的onload事件即可; 参考下原生的js写法: var n = new Image(); n.onload = function(){ //你想做的事 } n.src = "最后个图片的地址"; [/php] 再来看一下我的处理方法: [php] //设置图片宽度和高度 setImg: function(src){ var image = new Image(); image.onload = function(){ image.src = src; var thisheight = image.height;//图片高度 var thiswidth = image.width;//图片宽度 var loadingHeight = viewHeight - 100;//弹窗高度 var loadingWidth = parseInt(viewWidth) * 0.8;//弹窗宽度 //判断图片的宽度和高度是否超过弹窗的宽和高 if (thiswidth > (loadingWidth - 330)){ thisheight = (loadingWidth - 300) / thiswidth * thisheight; thiswidth = loadingWidth - 336; } if (thisheight > loadingHeight){ thiswidth = (loadingHeight - 20) / thisheight * thiswidth; thisheight = loadingHeight - 20; } var imgMarginTop = (loadingHeight - thisheight - 6)/2;//垂直居中 if (imgMarginTop < 0){ imgMarginTop = 3; } $("#imgload").css({ marginTop: imgMarginTop+'px', height: thisheight + 'px', width: thiswidth + 'px' }); } $("#imgload").attr('src',src); } [/php] 再放点关键字上来,为了百度联盟的账号早日通过,我天天写那个文章啊! 参考资料:http://zhidao.baidu.com/question/448201423.html

本站使用ThinkPHP框架开发读图网主题,目前托管在阿里云,图片由读图网提供. 蜀ICP备12031064号

Copyright © 2011-2018adophper.com All Rights Reserved.