js實現圖片的預加載

原創 歆冉 2019-06-04 13:51 
簡單理解：就是在使用該圖片資源前，先加載到本地來，真正到使用時，
直接從本地請求數據就行了

2.png

11.jpg

現在在頁面放一個img標籤

<img src="" alt=""  id="pic"/>

修改js代碼:

3.png

12.jpg

總結:
1 預加載的使用的場景

2 Image對象的使用

發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章

Uniapp中父組件向子組件傳遞prop，新的prop會帶有舊的prop屬性

簡潔 最近使用uniapp開發微信小程序，某一個頁面需要做成可配置化，因此會出現直接在父組件修改傳遞到子組件的prop，但是會出現這種情況，假設新傳遞的prop對象爲newObj，舊傳遞的prop對象爲oldObj，如果Objec

py_boy 2020-07-08 12:07:32

你在濫用Python嗎？初學者常會遇到的5個情景

雲棲號資訊：【點擊查看更多行業資訊】在這裏您可以找到不同行業的第一手的上雲資訊，還在等什麼，快來！ Python擁有衆多學習者，可謂是如今許多編程初學者的首選語言。易學的語法、豐富的庫和大量的社區都是Python飛速發展的主要原因。 6

雲棲號資訊小編 2020-07-28 12:40:54

如何在 Deno 應用程序中調用 Rust 函數？

雲棲號資訊：【點擊查看更多行業資訊】在這裏您可以找到不同行業的第一手的上雲資訊，還在等什麼，快來！ 要點： Deno 和 Node.js 都在基於 C/C ++ 的運行時上執行 JavaScript 以實現高性能。Deno 是單個二進制應

雲棲號資訊小哥 2020-07-22 15:37:50

巴克萊銀行用網頁時光機當作某些 JS 代碼的“CDN”

雲棲號資訊：【點擊查看更多行業資訊】在這裏您可以找到不同行業的第一手的上雲資訊，還在等什麼，快來！ 巴克萊銀行似乎一直在使用互聯網檔案館的網頁時光機（Wayback Machine）作爲一個“內容分發網絡”來獲取一個 Javascript

雲棲號資訊小哥 2020-07-10 14:34:46

spa頁面，不同組件按需引入js，aliplayer

(function(d, s, id) { let js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) retur

HainesFreeman 2020-07-08 12:39:19

js 函數重載

概念：允許某個函數有各種不同輸入，根據不同的輸入，調用不同的函數，然後返回不同的結果。 簡單定義：根據不同參數長度來實現讓同一個函數，進行不同處理 function addMethod (obj, name, fun) { le

HainesFreeman 2020-07-08 12:39:19

【Echarts+Html+LayUI】同一htlm頁面，點擊不同選項，加載不同echart

遇到的坑： 問題1 加載一個之後，再點擊另一個，可能是某個模板設定的問題，導致出現重疊的情況。 問題1解決方法： // 基於準備好的dom，初始化echarts實例 var div_main = document.getEle

33 Audrey 2020-07-08 12:35:22

函數的內部屬性————Arguments對象

一、基本點 arguments是一個類數組對象，包含着傳入函數中的所有參數。主要用途是保存函數參數，但這個對象還有一個名叫callee的屬性 arguments的 callee屬性是一個指針，指向擁有這個arguments對象的

ddx2019 2020-07-08 11:55:42

富文本編輯器之————Vue-Quill-Editor

1. 安裝vue-quill-eidtor yarn add vue-quill-editor 或者 npm install vue-quill-editor --save 2. 在main.js中引入： import Vue

ddx2019 2020-07-08 11:55:42

知道這 20 個正則表達式，能讓你少寫 1,000 行代碼

http://www.runoob.com/regexp/regexp-syntax.html 正則表達式，一個十分古老而又強大的文本處理工具，僅僅用一段非常簡短的表達式語句，便能夠快速實現一個非常複雜的業務邏輯。熟練地掌握正則表

哈哈金馆长 2020-07-08 11:36:23

a標籤中使用onclick提示function未定義

<a href="javascript:;" onclick="text()">leave a message</a> 今天做東西的時候，發現在a標籤中使用onclick觸發函數，一直報錯，顯示function未定義，開始還以爲

Ro0k1e 2020-07-08 11:27:27

Promise基本使用（慕課Promise教程筆記）

很久沒寫博客了......看了很多關於Promise的文章，但是感覺也不是很理解，沒辦法去就看視頻了。偶然發現慕課裏有個關於Promise的視頻，然後今天看了前兩章，順便整理了下筆記，記錄下吧~ Promise 是什麼？ 用於異步計算。

冰派甜心 2020-07-08 11:05:39

toString()、String(obj)和valueOf()

toString() 每個字符串都有一個toString()方法，該方法返回字符串的一個副本（當前函數源代碼的字符串），但是null和undefined值沒有這個方法。 toString()一般不用傳參，也可以傳入基數(進制數)爲參，默

冰派甜心 2020-07-08 11:05:38

Vue坑點雜談（一）Module not found Error Cannot resolve file or directory

Vue坑點雜談（一）Module not found: Error: Cannot resolve ‘file’ or ‘directory’ 一、寫在開頭 這個算是學習vue的同時開的一個新坑吧，記錄一下學習過程出現的紕漏，也幫

ODST_TheSolverO5 2020-07-08 10:59:42

JS基礎複習（四）四分鐘帶你徹底搞定全局變量和局部變量

JS基礎複習（四）四分鐘帶你徹底搞定全局變量和局部變量 一、寫在開頭 這個是因爲最近期末考要考web，恰好有這個知識點，所以我自己總結了一下，希望可以幫助到大家。 二、發現問題 區分什麼是局部變量，什麼是全局變量，變量之間賦值後結

ODST_TheSolverO5 2020-07-08 10:59:41