1 image物件
1.1 image物件的建立方式
1)通過建構函式方式建立
var img = new image('500','500');
第乙個引數為寬度,第二個引數為高度
2)通過
document.createelement()
建立img物件
var img = document.createelement('img');
1.2 影象物件的屬性
border 影象邊;
compele
是否載入完成;
height,width,src
;hspace
左右邊距;
vspace
上下邊距;
name名稱
1.3 影象物件的事件 1)
onabort
如果載入被中斷
,執行該事件 2)
onload
當載入完之後呼叫該事件 3)
onerror
當載入出現錯誤時
,呼叫該事件 4)
onkeydown,onkeypress,onkeyup
按下鍵觸發事件,長按鍵觸發事件,抬起鍵觸發事件
舉例說明:
var img = document.createelement('img');//通過document.createelement()建立img物件
var body = document.getelementsbytagname("body")[0];//獲取body標籤
//當載入完之後呼叫該事件
img.onload = function();
//注意:src一定寫在onload事件之後,否則程式在ie會報錯
//如果載入被中斷,執行該事件
img.onabort = function();
//當載入失敗時觸發
img.onerror = function();
img.src = "";
//距離左邊的距離
img.hspace = "300";
//距離上邊的乙個距離
img.vspace = "100";
,只要設定了
src2)ie8以下
,opera
不支援oneror
事件的
2 懶載入
懶載入步驟:
1)mage
中src
放一張佔位圖
2)真實放到
data-*(其中*
可以任意取名)中
3)配合頁面滾動事件使用,
滾動時判斷:帶載入的資源相對於瀏覽器頂端的距離
(offsettop)<=
可視區相對於瀏覽器頂端的距離
(document.scrolltop+window.innerheight)
如果true
src進行載入顯示
3 data屬性
1)data-*用於儲存頁面或應用程式私有自定義資料
2)data-*也可以為
html
所有元素嵌入自定義
data
屬性的能力
3)存放在
data-*
中的資料或資源是不會進資料請求或資料庫查詢的
4)data-*中的
*可以取任意名稱 如
:data-img,data-url,data-zhansan
舉例說明:
js點滴 JavaScript進度事件09
進度事件用來描述乙個事件進展的過程,比如xmlhttprequest物件發出的http請求的過程 進度事件有以下幾種。abort事件 當進度事件被中止時觸發。如果發生錯誤,導致程序中止,不會觸發該事件。error事件 由於錯誤導致資源無法載入時觸發。load事件 進度成功結束時觸發。loadstar...
09 javascript物件建立模式
方式1 object建構函式模式 建立乙個人 name tom age 12 先建立空object物件 var p new object p 此時內部資料是不確定的 再動態新增屬性 方法 p.name tom p.age 12 p.setname function name 測試 console.l...
javascript函式基礎 this基礎
this是函式體內自帶的乙個物件指標,它能夠始終指向呼叫物件 這個this代表的物件由this所在的執行作用域決定的,而不是根據this所在的定義作用域決定。this 屬性 如果this未包含屬性,則直接傳遞的是當前物件 1.this代表當前操作物件 this即代表 物件input 2.this代表...