Articles with img

IE 中图片大小的误判

IE 中图片大小的误判

IE8 以下的浏览器都会出现这个问题,不致命,但非常影响页面观感。幸运的是,你不一定能遇上。 情景是,图片需要动态加载,根据给出的缩放比例调整显示大小。图片是普通 PNG,只是存放点是多样化的,同样的图片,一个以文件形式存在,另一个是保存于缓存(内存)中,前面都是用 Apache,一个读文件返回,一个做转发,用 IE 访问它们,获取其大小信息,结果竟然是不一样的。 装载图片的代码片段: function loadImg(url, callback) { var img = new Image(); img.src = url; if (img.complete) { console.log("complete"); return callback.call(img, url); } img.onload = function() { img.onload = null;…

Continue reading

Chrome,为什么第二张图片看不见呢?

在测试的时候,建立一个最小测试集对于测试调试是很有帮助的。 为了测试与图片装载相关的内容,建立了下面的页面。内容很简单,就是动态添加两个 IMG。 <html> <head> <title>Test Loading IMG</title> <style>body { background-color: #00F; }</style> </head> <body> <script> function show() { for (var i = 0; i < 2; i++) { var img = new Image(); img.src…

Continue reading

Img装载完毕后自动调整大小

在show图片的时候经常需要用到它,大概是大家都比较懒去为每个图调整大小,用Photoshop的批处理是可以省掉很多功夫了,但为求更省事,用脚本啦。 <img id="inu" src="your-image-path.jpg" onload = "resize(this)" /> 在页面里插一行就可以了(resize函数体在下面),如果图像是动态装载的 var img = document.createElement('img'); img.onload = resize; img.src = "http://farm4.static.flickr.com/3575/3343323074_499a81709c_o.png"; var MAX_IMAGE_SIZE = { x: 400, y: 400 }; function resize(obj) { var img = obj…

Continue reading