Chrome和Safari瀏覽器jquery width()獲取不到高度的問題
問題概要 :
偶要遍歷一組圖片,遍歷時需要獲取其寬度,效果出來後,IE和Firefox都沒有問題,唯獨Chrome和Safari會出現獲取不到圖片寬度的情況。以往基本上是IE不相容,這下出現Chrome和Safari不相容了,倒覺得稀奇了,故寫出來分享下。
注:程式碼修改之前,直接用的$(ele).width()來取圖片的寬度。涉及程式碼:
- $(function(){
- ...//此處省略N行
- var w = $(this).width();
- ...//此處省略N行
- });
分析後得知,Chrome和Safari肯定是圖片還沒有完全載入進來,就去獲取圖片的寬度了,得其寬度為0,肯定就出錯了
解決辦法:
一、不要使用”$(document.ready(function(){…})”或其簡寫形式”$(function(){…}),使用$(window).load(function(){}); 程式碼改寫如下:
- $(window).load(function(){
- ...//此處省略N行
- var w = $(this).width();
- ...//此處省略N行
- });
二、使用Image物件和其onload方法
- $(function(){
- ...//此處省略N行
- var that = $(this);
- var img =newImage();
- img.src = $(this).attr("src");
- img.
- var w = img.width;
- }
- ...//此處省略N行
- });
最後囉嗦下,獲取高度,用$(ele).height()在Chrome和Safari下也會出現此問題。
相關推薦
Chrome和Safari瀏覽器jquery width()獲取不到高度的問題
問題概要 : 偶要遍歷一組圖片,遍歷時需要獲取其寬度,效果出來後,IE和Firefox都沒有問題,唯獨Chrome和Safari會出現獲取不到圖片寬度的情況。以往基本上是IE不相容,這下出現Chrome和Safari不相容了,倒覺得稀奇了,故寫出來分享下。 注:程式
web前段設計之痛:手機瀏覽器和pc瀏覽器的width:100%的自適應問題
Tips: 除錯 iPad 或 iPhone 可在設定中啟動除錯模式,在 Mac 中的 Safari 瀏覽器 同樣開啟開發者模式後,進行聯機除錯。功能彪悍。 最近在做一個頁面時,發現在 iPad 的 Safari 瀏覽器中背景顯示不全,定位到該 div 後發現所指定 cs
為Chrome和火狐瀏覽器編寫擴充套件
由於擴充套件標準的逐漸一致, 現在同一擴充套件程式碼庫已經有可能同時用於Chrome和火狐. 下面是一個簡單的工具欄按鈕和彈窗(尚無任何實際功能): 程式碼庫地址: nobodxbodon/suan1 所有程式碼: manifest.json: { "manifest_
解決IE瀏覽器jQuery執行ajax不響應問題
從開始在第一個公司的時候開始自己寫了程式碼都是用火狐測試,後來因為客戶那裡只使用IE的瀏覽器所以把完成的功能測試了一下,發現了好幾個問題,一是自己寫的程式碼不夠規範,二是IE很挑剔。現在在這個
前後端分離(跨域)sessionid不一致Safari瀏覽器解決方案(不能保持會話或者不能儲存cookie)
對於前後端分離的專案或者單點登入的系統後臺需要做session會話校驗或者cookie跨域儲存,Safari瀏覽器可能會遇到無法儲存cookie的時候,解決方案如下:PC端Safari瀏覽器需要設定 偏好設定-> Safari -> 阻止Cookie ->
js style.width獲取不到元素的寬度
jquery用習慣了,用width()就能獲取元素的寬度,但有些時候用js獲取元素寬度獲取不到,document.getElementById("id").style.width,原因:1.元素未設定寬度值2.元素設定了寬度值,但,設定在內聯或外聯樣式表中,而非內嵌式的。雖然
js獲取瀏覽器和設備相關width(屏幕的寬度)
view dev viewport document one size ini left cal 首先呢,我們將iPhone手機的相關數據表示如下 我們要理解很多東西,比如邏輯分辨率、物理分辨率、縮放因子、ppi等,這裏先不討論。 首先呢,我們先介紹下各個屏幕寬度: 網
【解決Chrome瀏覽器和IE瀏覽器上傳附件相容的問題 -- Chrome關閉flash後,uploadify外掛不可用的解決辦法】
專案中遇到過這種情況: 利用uploadify外掛在IE和chrome瀏覽器中上傳附件正常, 突然有一天chrome禁用了flash外掛,uploadify外掛在chrome中就不能正常使用了,IE上正常。 =========================================
js中image獲取不到width和heigth的問題
@Author LazyChun js中image的src賦值了,而image.width == 0 && image.height == 0 今天做一個圖片上傳並做寬高限制的c
jquery中獲取相鄰元素相關的命令:next()、prev()和siblings()
cnblogs lin Language javascrip prev round blog scrip color jquery裏我們要獲取某個元素的相鄰元素時,可以用到的命令有三個: next():用來獲取下一個同輩元素。 prev():用來獲取上一個同輩元素。 sib
Chrome瀏覽器V43版本號不支持silverlight 5.0的解決的方法
ati java、 正常 備註 操作系統 fire 說了 article 版本 場景: 瀏覽器:chrome V43 插件:silverlight 5.0 操作系統:xp 問題: 自己開發silverlight站點在IE7和firefox中能正常打
jsp頁面在 移動端 自適應,chrome瀏覽器沒問題,可是safari瀏覽器有問題的解決方法
ref orm one 方法 viewport 轉載 min maximum 顯示 在網頁中設置的1px與物理像素中的1px不會相同,所以導致不同在不同手機上顯示結果都不相同,通過以下設置找到了適合當前網頁自適應不同手機、不同瀏覽器的辦法,代碼如下: “ <meta
js和jquery如何獲取圖片真實的寬度和高度_javascript技巧
寬高 clas 獲取 deb 問題 網頁 log css www. 在做pc網頁的時候,有時候會考慮按照插入的圖片的尺寸來判斷圖片是橫圖還是豎圖。然後判斷過後給予不同的展示方式! 另外一種就是在手機頁面上,在新聞頁插入的圖片往往都是按照圖片的原尺寸來展示,如果手機屏幕太小,
Iphone移動Web和safari下輸入文本無法顯示或者顯示看不到的問題
朋友 hold 空白 put 後來 問題 andro type orm 情況是幫朋友調試Web app,在Android下顯示正常,用iphone查看時輸入文本框發現輸入的文字都空白,加入背景上仍然看不到文字。代碼如下:<div class="phone&q
Safari瀏覽器對設定的高度不起作用,解決方案
發現 文字 one 底部對齊 設定 pan select標簽 pro prop 1、在做瀏覽器兼容的時候,發現select標簽在safari蘋果瀏覽器中的高度永遠都是默認的,這時候解決的辦法是加上line-height屬性就可以設置;2、但加上line-height屬性可以
SQL 存儲過程 :根據ID獲取不包含自身和子項的項目
關鍵字 ret obj IE ide get spa and cloud USE [PrettyCloud] GO /****** Object: StoredProcedure [dbo].[GetParentLevel] Script Date: 04/20/
jquery中獲取焦點和失去焦點事件
jquery 焦點事件 <script src="../js/jquery-1.12.4.min.js"></script> <script> $(function(){ // 獲取焦點事件,不傳參 focus
js實現復制內容到剪切板,兼容pc和手機端,支持Safari瀏覽器
阻止 sele doc length rev 鍵盤 編輯狀態 nts pconnect Javascript原生有一些事件:copy、paste、cut, 這些事件可以作用的目標元素: 能獲得焦點的元素 (如contentEditable內容能編輯或者可以選中的元素),
Chrome 谷歌瀏覽器安裝使用 Postman 和 Sense 插件
目的 蘋果 進入 都在 alt blank earch 更強 配置 博客地址:http://www.moonxy.com 一、前言 Google Chrome 的特點是簡潔、快速等。Chrome 支持多標簽瀏覽,每個標簽頁面都在獨立的"沙箱"內運行,在提高安全性的同時,一個
Ubuntu16.04安裝Chrome瀏覽器及解決root不能打開的問題
nod install 打開 all context nbsp file exec serve 1. 安裝桌面(emmm,不知道是否只執行第二個命令就行) # apt-get install gonme# apt-get install ubuntu-desktop2.