2. 程式人生 > >js獲取圖片是否加載完畢

js獲取圖片是否加載完畢

阿新 • • 發佈：2017-08-10
function chang 測試 callback ges col timer 有時 ade

Snandy

If you cannot hear the sound of the genuine in you, you will all of your life spend your days on the ends of strings that somebody else pulls.

JavaScript判斷圖片是否加載完成的三種方式

有時需要獲取圖片的尺寸，這需要在圖片加載完成以後才可以。有三種方式實現，下面一一介紹。

一、load事件

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <title>img - load event</title>
</head>
<body>
    <img id="img1" src="http://pic1.win4000.com/wallpaper/f/51c3bb99a21ea.jpg">
    <p id="p1">loading...</p>
    <script type="text/javascript">
        img1.onload 
 
= function() {
            p1.innerHTML = ‘loaded‘
        }
    </script>
</body>
</html>

測試，所有瀏覽器都顯示出了“loaded”，說明所有瀏覽器都支持img的load事件。

二、readystatechange事件

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <title>img - readystatechange event</title>
</head>
<body>
    <img id="img1" src="http://pic1.win4000.com/wallpaper/f/51c3bb99a21ea.jpg">
    <p id="p1">loading...</p>
    <script type="text/javascript">
        img1.onreadystatechange 
 
= function() {
            if(img1.readyState=="complete"||img1.readyState=="loaded"){
                p1.innerHTML = ‘readystatechange:loaded‘
            }
        }
    </script>
</body>
</html>

readyState為complete和loaded則表明圖片已經加載完畢。測試IE6-IE10支持該事件，其它瀏覽器不支持。

三、img的complete屬性

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <title>img - complete attribute</title>
</head>
<body>
    <img id="img1" src="http://pic1.win4000.com/wallpaper/f/51c3bb99a21ea.jpg">
    <p id="p1">loading...</p>
    <script type="text/javascript">
        function
 
 imgLoad(img, callback) {
            var timer = setInterval(function() {
                if (img.complete) {
                    callback(img)
                    clearInterval(timer)
                }
            }, 50)
        }
        imgLoad(img1, function() {
            p1.innerHTML(‘加載完畢‘)
        })
    </script>
</body>
</html>

技術分享

js獲取圖片是否加載完畢

相關推薦

js獲取圖片是否加載完畢

function chang 測試 callback ges col timer 有時 ade Snandy If you cannot hear the sound of the genuine in you, you will all of your life spe

jq常用事件（on,blur,focus,change）,js/jq等待圖片(頁面)加載完畢事件,js讀取文件

load prop 擁有 右鍵 bsp blur 讀文件 das 加載圖片 jq常用事件（on,blur,focus,change） // 方法一（推薦） $(‘.box‘).on( "click",function() {} ) $(‘.box‘).on( "c

原生JS實現圖片懶加載之一：Element.getBoundingClientRect()

itl title get 有時 調用函數 HR intersect zh-cn ima 實際項目開放中，特別是電商項目，由於有大量的圖片加載必然會影響性能，所以實現圖片的懶加載是非常有必要的。 實現圖片懶加載的知識點 標簽的data-屬性 可視區域的監聽 實現圖片

原生js實現圖片懶加載

發送 else HR 默認 div adc dom操作 move += 原理： 將頁面中的img標簽src指向一張小圖片或者src為空，然後定義data-src（這個屬性可以自定義命名，我自己用data-src）屬性指向真實的圖片。 src指向一張默認的圖片，否則當src為

jQuery框架使用，jq選擇器，jq操作頁面內容， jq操作類名，jq操作全局屬性,jq獲取盒子信息,jq獲取位置信息，js/jq頁面加載完畢事件，jq事件

log html 事件對象 remove js事件對象 屬性 相對 eight prevent jq選擇器 // 獲取所有的頁面元素jq對象 $(‘css3選擇器語法‘); var $box = $(".box:nth-child(1)"); 獲取的是j

JS教程之實現加載圖片時百分比進度

scrip 計算 show || microsoft resp fire open func 思路：思路其實很簡單，ajax執行時，會生成一個event對象，其中會包含要加載的文件的大小和當前已經加載完成部分的大小，通過這兩個值即可計算出百分比 事件介紹onprogress

JS圖片預加載插件

prev jpg ... def lib sogo itl reload btn 在開發H5項目中有時候會遇到要加載大量圖片的情況，利用預加載技術可以提高用戶瀏覽時的體驗。 1)概念：懶加載也叫延遲加載：JS圖片延遲加載,延遲加載圖片或符合某些條件時才加載某

圖片懶加載庫echo.js源碼學習

流行 cal 特性 document 視圖 背景 != 之前 attribute 最近不是在學習設計模式嗎，然後就看到了代理模式加載圖片的樣例，然後自己實現了一下，就發現，自己寫的這貨每次就只能加載一張圖片，而且圖片要放在哪也是個很嚴重的問題 然後就去了 gayhub 找

web性能優化之js圖片懶加載

handle nbsp put ++ brush border get nod span html <div class="container"> <ul> <li> <div id="first" cla

兩種方法實現在HTML頁面加載完畢後運行某個js

功能性 下載 事件 兩種 一點 方法 實現 代碼 寬度 js方法： <script type="text/javascript"> window.onload=function(){ var userName="xiaoming"; alert(user

js-圖片預加載

preloader down gpo 預加載 image -m function image() mark //預加載 function preloader() { if (document.images) { var img1 = new Image(); var img

js圖片未加載完顯示loading效果

nts case 顯示圖片 loaded center err let navi 初始化 <html> <title>js圖片未加載完顯示loading效果</title> <body> <style> img{

圖片懶加載之lazyload.js插件使用

圖片路徑 function fun undefine 引入 進行 屬性 div 所有 簡介 lazyload.js用於長頁面圖片的延遲加載，視口外的圖片會在窗口滾動到它的位置時再進行加載，這是與預加載相反的。 使用 lazyload依賴與jquery。所以先引入jquery

webview攔截css,js,圖片後加載本地外部儲存的檔案（shouldOverrideUrlLoading）

說明： Android WebView的快取機制就不多說了，這裡是單獨自己攔截css，js和圖片等自己進行快取。 需求：Android客戶端需要攔截網頁的每個css，js，圖片等，然後根據實際情況判斷來使用本地儲存卡或者assets中的js，css和圖片資源。 實現：

虛擬代理實現圖片預加載

cti plus urn reload color load 會有 charset creat 1. 代碼如下 <!doctype html> <html lang="en"> <head> <meta chars

Javascript圖片預加載詳解

定期 on() 運行 其他 可能 如果 最好的 array request 預加載圖片是提高用戶體驗的一個很好方法。圖片預先加載到瀏覽器中，訪問者便可順利地在你的網站上沖浪，並享受到極快的加載速度。這對圖片畫廊及圖片占據很大比例的網站來說十分有利，它保證了圖片快速、無縫地發

nginx 解決css、js請求路徑無法加載問題

proxy dem jfinal pan oot usr bmp 兩個 cli location / { proxy_pass http://jfinaldemo; root /usr/share/nginx/html;

實現圖片滾動加載以及排版優化

技術分享 com 興趣 images targe 拖動 img 目前 來看 最近閑來沒事,做了一個畫江湖圖片滾動加載的demo,大家感興趣可以下來看一下 以下為界面截圖: 圖片會隨滾動條的拖動動態加載，目前來說只是加載的本地的資源，大家可以從後臺抓取數據

大坑啊！！！關於頁面加載完畢事件！！！

tro spa span 頁面 nbsp 關於 獲取 read nload 這個坑導致我頁面加載完畢後獲取元素高度有問題，獲取不正確或者是很小才20px，元素本身高度幾百，困擾了我這個新手幾天。原因就是js原生的onload事件和jq的ready事件的區別。 1.執行時間

【筆記】canvas圖片預加載及進度條的實現

函數 style uil 圖片加載 mage code 重繪 執行 ces /*star *loading模塊 *實現圖片的預加載，並顯示進度條 *參數：圖片數組對象，加載完成的回調函數 */ function loadImages(sources,c