JQ獲取動態(tài)加載的圖片大小的正確方法分享
有一些很容易出錯的獲取動態(tài)加載的圖片的尺寸的方法, 之所以出錯, 主要原因是:
你在代碼在圖片從網(wǎng)頁上下載完畢之前就調(diào)用了, 這種情況在本機(jī)開發(fā)時不太容易發(fā)現(xiàn).
jQuery load()事件處理的BUG, 當(dāng)圖片是從瀏覽器緩存取得時, 獲取的是錯誤的尺寸.
錯誤的代碼是:
(錯誤)在添加了HTML之后立即調(diào)用代碼獲取尺寸
var html = '';
$('#my_div').html(html);
var width = $('#my_div img').width(); // may return 0
(錯誤)用jQuery的load()事件處理
var html = '';
var img = $(html);
html.load(function(){
// return 0 if image is loaded from browser cache
var width = img.width();
});
$('#my_div').html(img);
下面這種才是真正正確的方法, 使用JavaScript的Image類:
正確的方法
var html = '';
$('#my_div').html(html);
var ni = new Image();
ni.onload = function(){
var width = ni.width;
}
ni.src = img.attr(URL);
相關(guān)文章
jQuery自定義圖片縮放拖拽插件imageQ實現(xiàn)方法(附demo源碼下載)
這篇文章主要介紹了jQuery自定義圖片縮放拖拽插件imageQ實現(xiàn)方法,涉及jQuery擴(kuò)展操作及頁面元素操作技巧,并附帶了完整的demo源碼供讀者下載參考,需要的朋友可以參考下2016-05-05jQuery替換節(jié)點用法示例(使用replaceWith方法)
這篇文章主要介紹了jQuery替換節(jié)點的方法,結(jié)合簡單實例形式分析了jQuery使用replaceWith方法替換P標(biāo)簽顯示內(nèi)容的相關(guān)實現(xiàn)技巧,需要的朋友可以參考下2016-09-09放棄用你的InnerHTML來輸出HTML吧 jQuery Tmpl不詳細(xì)講解
在Ajax橫道的今天,我們在頁面交互上有了更高的要求,動態(tài)生成HTML毫無疑問是其中的一種。動態(tài)生成HTML的方式多種多樣,最終通過一定的方法輸出給用戶innerHTML、documentWrite等方式2013-04-04jquery.uploadView 實現(xiàn)圖片預(yù)覽上傳功能
圖片上傳,網(wǎng)上有好多版本,今天小編給大家分享jquery.uploadView 實現(xiàn)圖片預(yù)覽上傳功能,感興趣的的朋友一起看看吧2017-08-08jquery實現(xiàn)的3D旋轉(zhuǎn)木馬特效代碼分享
這篇文章主要介紹了jquery實現(xiàn)的3D旋轉(zhuǎn)木馬特效,功能實現(xiàn)非常簡單,推薦給大家,有需要的小伙伴可以參考下。2015-08-08