日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時(shí)間:8:30-17:00
你可能遇到了下面的問題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
CSS中怎么控制前端圖片HTTP請(qǐng)求

這篇文章將為大家詳細(xì)講解有關(guān)CSS中怎么控制前端圖片HTTP請(qǐng)求,文章內(nèi)容質(zhì)量較高,因此小編分享給大家做個(gè)參考,希望大家閱讀完這篇文章后對(duì)相關(guān)知識(shí)有一定的了解。

創(chuàng)新互聯(lián)專業(yè)提供綿陽服務(wù)器托管服務(wù),為用戶提供五星數(shù)據(jù)中心、電信、雙線接入解決方案,用戶可自行在線購買綿陽服務(wù)器托管服務(wù),并享受7*24小時(shí)金牌售后服務(wù)。

1. 隱藏圖片

XML/HTML Code復(fù)制內(nèi)容到剪貼板

  1.   

http請(qǐng)求如下:
CSS中怎么控制前端圖片HTTP請(qǐng)求

結(jié)論:只有Opera不產(chǎn)生請(qǐng)求。 注意:用visibility: hidden隱藏圖片時(shí),在Opera下也會(huì)產(chǎn)生請(qǐng)求。

2. 重復(fù)圖片

XML/HTML Code復(fù)制內(nèi)容到剪貼板

  1.   

  2.   

http請(qǐng)求如下:
CSS中怎么控制前端圖片HTTP請(qǐng)求

結(jié)論:所有瀏覽器都只產(chǎn)生一次請(qǐng)求 。

3. 重復(fù)背景

CSS Code復(fù)制內(nèi)容到剪貼板

  1.   

  2.     .test1 { background: url(haorooms.jpg) }   

  3.     .test2 { background: url(haorooms.jpg) }   

  4.   

  5. test1

  

  • test2

  •   

    http請(qǐng)求如下:
    CSS中怎么控制前端圖片HTTP請(qǐng)求

    結(jié)論:所有瀏覽器都只產(chǎn)生一次請(qǐng)求。

    4. 不存在的元素的背景

    CSS Code復(fù)制內(nèi)容到剪貼板

    1.   

    2.     .test1 { background: url(haorooms.jpg) }   

    3.     .test2 { background: url(http2.jpg) } /* 頁面中沒有class為test2的元素 */  

    4.   

    5. test1

      

    http請(qǐng)求如下:
    CSS中怎么控制前端圖片HTTP請(qǐng)求

    結(jié)論:背景僅在應(yīng)用的元素在頁面中存在時(shí),才會(huì)產(chǎn)生請(qǐng)求。這對(duì)CSS框架來說,很有意義。

    5. 隱藏元素的背景

    CSS Code復(fù)制內(nèi)容到剪貼板

    1.   

    2.     .test1 { background: url(haorooms.jpg); display: none; }   

    3.     .test2 { background: url(http2.jpg); visibility: hidden; }   

    4.   

    5.   

    6. test1

      

    http請(qǐng)求如下:
    CSS中怎么控制前端圖片HTTP請(qǐng)求

    結(jié)論:Opera和Firefox對(duì)于用display: none隱藏的元素背景,不會(huì)產(chǎn)生HTTP請(qǐng)求。僅當(dāng)這些元素非display: none時(shí),才會(huì)請(qǐng)求背景圖片。

    6. 多重背景

    CSS Code復(fù)制內(nèi)容到剪貼板

    1.   

    2.     .test1 { background: url(haorooms.jpg); }   

    3.     .test1 { background: url(http2.jpg); }   

    4.   

    5. test1

      

    上面這段代碼的http請(qǐng)求,只會(huì)請(qǐng)求http2.jpg這一張圖片,原因是test1的class把上面的給覆蓋掉了,所有只請(qǐng)求后面的一張圖片!
    假如用css3多張背景圖片的寫法:

    CSS Code復(fù)制內(nèi)容到剪貼板

    1.   

    2.     .test1 { background-image:url("haorooms.jpg"),url("http2.jpg"); }   

    3.   

    4. test1

      

    那么http請(qǐng)求如下:
    CSS中怎么控制前端圖片HTTP請(qǐng)求

    webkit引擎瀏覽器對(duì)背景圖都請(qǐng)求,是因?yàn)橹С諧SS3中的多背景圖。

    7. hover的背景加載

    CSS Code復(fù)制內(nèi)容到剪貼板

    1.   

    2.     a.test1 { background: url(haorooms.jpg); }   

    3.     a.test1:hover { background: url(http2.jpg); }   

    4.   

    5. test1  

    http請(qǐng)求如下:
    CSS中怎么控制前端圖片HTTP請(qǐng)求

    結(jié)論:觸發(fā)hover時(shí),才會(huì)請(qǐng)求hover狀態(tài)下的背景。不觸發(fā)的話,只請(qǐng)求默認(rèn)的背景圖片。

    8. JS里innerHTML中的圖片

    JavaScript Code復(fù)制內(nèi)容到剪貼板

    1.   

    http請(qǐng)求如下:
    CSS中怎么控制前端圖片HTTP請(qǐng)求

    結(jié)論:只有Opera不會(huì)馬上請(qǐng)求圖片。

    注意:當(dāng)添加到DOM樹上時(shí),Opera才會(huì)發(fā)送請(qǐng)求。

    9. 圖片預(yù)加載
    最常用的是JS方案:

    JavaScript Code復(fù)制內(nèi)容到剪貼板

    1.   

    在無JS支持的環(huán)境下,可以采用隱藏元素來預(yù)加載:

    CSS Code復(fù)制內(nèi)容到剪貼板

    1.   

    總結(jié)
    1、對(duì)于隱藏圖片和隱藏元素的背景,Opera不會(huì)產(chǎn)生請(qǐng)求。
    2、對(duì)于隱藏元素的背景,F(xiàn)irefox也不會(huì)產(chǎn)生請(qǐng)求。
    3、對(duì)于尚未插入DOM樹的img元素,Opera不會(huì)產(chǎn)生請(qǐng)求。
    4、基于webkit引擎的Safari和Chrome,支持多背景圖。
    5、其它情景,所有主流瀏覽器保持一致。

    關(guān)于CSS中怎么控制前端圖片HTTP請(qǐng)求就分享到這里了,希望以上內(nèi)容可以對(duì)大家有一定的幫助,可以學(xué)到更多知識(shí)。如果覺得文章不錯(cuò),可以把它分享出去讓更多的人看到。


    本文標(biāo)題:CSS中怎么控制前端圖片HTTP請(qǐng)求
    URL鏈接:http://www.dlmjj.cn/article/jhoedg.html