JQ獲取動(dòng)態(tài)加載的圖片大小的正確方法分享
更新時(shí)間：2013年11月08日 17:00:44 作者：
這篇文章介紹了JQ獲取動(dòng)態(tài)加載的圖片大小的正確方法，有需要的朋友可以參考一下
有一些很容易出錯(cuò)的獲取動(dòng)態(tài)加載的圖片的尺寸的方法, 之所以出錯(cuò), 主要原因是:
你在代碼在圖片從網(wǎng)頁上下載完畢之前就調(diào)用了, 這種情況在本機(jī)開發(fā)時(shí)不太容易發(fā)現(xiàn).
jQuery load()事件處理的BUG, 當(dāng)圖片是從瀏覽器緩存取得時(shí), 獲取的是錯(cuò)誤的尺寸.
錯(cuò)誤的代碼是:
(錯(cuò)誤)在添加了HTML之后立即調(diào)用代碼獲取尺寸
復(fù)制代碼 代碼如下:
var html = '';
$('#my_div').html(html);
var width = $('#my_div img').width(); // may return 0
(錯(cuò)誤)用jQuery的load()事件處理
復(fù)制代碼 代碼如下:
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類:
正確的方法
復(fù)制代碼 代碼如下:
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鼠標(biāo)移到小圖顯示大圖效果的方法,涉及jQuery鼠標(biāo)事件與圖形操作技巧,需要的朋友可以參考下2015-06-06
jQuery自定義圖片縮放拖拽插件imageQ實(shí)現(xiàn)方法(附demo源碼下載)
這篇文章主要介紹了jQuery自定義圖片縮放拖拽插件imageQ實(shí)現(xiàn)方法,涉及jQuery擴(kuò)展操作及頁面元素操作技巧,并附帶了完整的demo源碼供讀者下載參考,需要的朋友可以參考下2016-05-05
jQuery替換節(jié)點(diǎn)用法示例(使用replaceWith方法)
這篇文章主要介紹了jQuery替換節(jié)點(diǎn)的方法,結(jié)合簡單實(shí)例形式分析了jQuery使用replaceWith方法替換P標(biāo)簽顯示內(nèi)容的相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2016-09-09
放棄用你的InnerHTML來輸出HTML吧 jQuery Tmpl不詳細(xì)講解
在Ajax橫道的今天，我們?cè)陧撁娼换ド嫌辛烁叩囊?，?dòng)態(tài)生成HTML毫無疑問是其中的一種。動(dòng)態(tài)生成HTML的方式多種多樣，最終通過一定的方法輸出給用戶innerHTML、documentWrite等方式2013-04-04
這篇文章主要為大家詳細(xì)介紹了使用jQuery實(shí)現(xiàn)購物車，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-10-10
基于jQuery實(shí)現(xiàn)點(diǎn)擊彈出層實(shí)例代碼
基于jquery實(shí)現(xiàn)點(diǎn)擊鏈接彈出層效果，其基本實(shí)現(xiàn)原理是這樣的：jquery操作DOM元素。對(duì)層樣式的設(shè)置。將display:設(shè)置為none;讓層隱藏；對(duì)jq點(diǎn)擊彈出層相關(guān)知識(shí)感興趣的朋友一起學(xué)習(xí)吧2016-01-01
jquery.uploadView 實(shí)現(xiàn)圖片預(yù)覽上傳功能
圖片上傳，網(wǎng)上有好多版本，今天小編給大家分享jquery.uploadView 實(shí)現(xiàn)圖片預(yù)覽上傳功能，感興趣的的朋友一起看看吧2017-08-08
jquery實(shí)現(xiàn)的3D旋轉(zhuǎn)木馬特效代碼分享
這篇文章主要介紹了jquery實(shí)現(xiàn)的3D旋轉(zhuǎn)木馬特效，功能實(shí)現(xiàn)非常簡單，推薦給大家，有需要的小伙伴可以參考下。2015-08-08
這篇文章主要介紹了從如何寫JQuery插件，需要注意的事項(xiàng)，還有必須要做的步驟，看過這個(gè)文章相信你會(huì)明白如何寫好一個(gè)JQuery插件2013-11-11
這篇文章主要介紹了jquery常用操作小結(jié),需要的朋友可以參考下2014-07-07