1. 程式人生 > >通過XMLHttpRequest載入外部圖片檔案或資料

通過XMLHttpRequest載入外部圖片檔案或資料

var remoteImage, 
    container = document.querySelector('.imageContainer'),
    toLoad = { 'images': [ 
       'http://myserver.com/image1.png', 
       'http://myserver.com/image2.png' ] }; // list of image URLs

toLoad.images.forEach(function(imageToLoad) {
      remoteImage = new RAL.RemoteImage(imageToLoad);
      container.appendChild(remoteImage.element);
      RAL.Queue.add(remoteImage);
});
RAL.Queue.setMaxConnections(4);
RAL.Queue.start();

如果只想簡單的使用,沒有這麼多需求而去載入一個庫,可以簡單的封裝一個函式來處理:
function loadImage(uri,callback){
	if(typeof callback!='function'){
		callback=function(uri){
			console.log(uri);
		}
	}
	var xhr = new XMLHttpRequest();
	xhr.responseType = 'blob';
	xhr.onload = function() {
		callback(window.URL.createObjectURL(xhr.response));
	}
	xhr.open('GET', uri, true);
	xhr.send();
}

//使用方法
var imgUrl='http:xxx.jpg';
loadImage(imgUrl,function(URI){
	//Do some thing while image is load
});

function loadUrl(uri,callback){
	if(typeof callback!='function'){
		callback=function(uri){
			console.log(uri);
		}
	}
	var xhr = new XMLHttpRequest();
	xhr.responseType = 'text';
	xhr.onload = function() {
		callback(xhr.response);
	}
	xhr.open('GET', uri, true);
	xhr.send();
}

//使用方法
var url = 'http:xxx.do';
loadUrl(url,function(data){
	//Do some thing while image is load
});

XMLHttpRequest.responseType:
https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/responseType
如:"document","json","text","blob"

相關推薦

通過XMLHttpRequest載入外部圖片檔案資料

var remoteImage, container = document.querySelector('.imageContainer'), toLoad = { 'images': [ 'http://myserver.com/im

Ubuntu系統下通過命令查詢檔案資料

1. whereis+檔名 用於程式名的搜尋,搜尋結果只限於二進位制檔案(引數-b)、man說明檔案(引數-m)和原始碼檔案(引數-s),如果省略引數,則返回所有資訊。 2. find / -name +檔名 find是在指定的目錄下遍歷查詢,如果目錄使用 /

Unity實用小工具指令碼—載入外部圖片的三種方式

一、前言 專案上需要載入多個地圖,每個地圖的貼圖將近200M,所有地圖加起來貼圖將近2G。因此,想著能不能將貼圖放到工程外載入,逐研究了一下,得出了三種載入方式,分別是WWW載入、C#原生的IO載入在轉換成Texture2D和Assetbundle打包和載入。

【Android】刪除已知路徑的檔案資料

轉載請註明出處,原文連結:https://blog.csdn.net/u013642500/article/details/80153517 【功能】 delete(String delFile):刪除檔案或資料夾 deleteSingleFile(String fil

c 判斷檔案資料夾是否存在,多種方法, 為什麼從一開始就不直接來個統一的呢?

具體內容,請看: https://blog.csdn.net/u012494876/article/details/51204615   判斷檔案或資料夾是否存在,竟然有這麼多方法: GetFileAttributes() CreateFile() _access() Find

【JS API】指令碼語言-裝置控制介面說明-判斷檔案資料夾是否存在

裝置控制介面說明-判斷檔案或資料夾是否存在 doesExist 原型: doesExist(filePath) 是否支援多裝置: 不支援 描述: 判斷指定的檔案或資料夾是否存在。 引數: filePath: 手機上檔案或資料夾路徑 返回值: 整型:檔案或資

SVN管理Android專案忽略檔案資料

一. 遇到的問題      剛開始提交專案原始碼時,做了個全量提交,將專案的build、.idea、.gradle ,local.properties等檔案或目錄都提交到了程式碼倉庫中進行管理,結果發現每次對專案做了原始碼

刪除檔案資料夾不成功,顯示被程序佔用的解決方法

 我是在解除安裝SQLServer2008的最後一步,刪除c盤下的program Files下Microsoft SOL Server資料夾下的90資料夾時出現該錯誤。解決方案如下: 1.開啟工作管理員,點選標題欄的效能,在點選資源監視器,在標題欄裡點選cpu,再在關聯的控制代碼裡搜尋

Linux 檢視以及修改檔案資料夾的許可權

1. linux下修改檔案使用者組 chgrp: change group的簡寫,修改檔案所屬的使用者組。 chgrp users test.log 修改後檢視 ls -l -rwxrwx— 1 work users 0 Jun 8 15:46 test.log

File-用遞迴刪除某資料夾(資料夾下可能有檔案資料夾)

利用遞迴演算法刪除某資料夾(包括其所有的子檔案及資料夾) import java.io.File; public class Dem01 { public static void main(String[] args) { File file = new F

Python中os.path和os.makedirs的運用(判斷檔案資料夾是否存在,建立資料夾)

import os import numpy as np data = np.array([1, 2, 3]) if not os.path.exists("./data/"): print("# path not exists") os.makedirs("./data/")

C#如何操控FTP,獲取FTP檔案資料夾列表,獲取FTP檔案大小,FTP上傳,FTP刪除檔案,FTP新建資料夾、刪除資料

C#如何操控FTP 出處:http://www.cnblogs.com/rond/archive/2012/07/30/2611295.html,http://www.cnblogs.com/rond   關於FTP的應用免不了要對FTP進行增刪查改什麼的。通過搜尋,整理和修改

pyhon搜尋目錄下的檔案資料

pyhon搜尋目錄下的檔案或資料夾 # !/usr/bin/env python # -*-coding:utf-8-*- """ Copyright(c)2018,浙江大華 file:     sambaCenter.py author:   27711 da

【SVN】徹底 svn 伺服器上的 刪除某一個檔案資料

參考:   CSDN1:https://blog.csdn.net/u011729865/article/details/78764523   CSDN2:https://blog.csdn.net/wyyother1/article/details/80061952 1、注意一下,我客戶端是在 win

檔案資料夾打包成壓縮檔案

//生成的壓縮檔案的路徑 public String compressFile(String resource,String target){ try { //要壓縮的檔案或資料夾 File res = new File(resource);

Win檢視檔案(資料夾)被哪個程序使用

windows系統中當我們在刪除某個檔案或資料夾時有時會提示該檔案有程式在使用不能被刪除,這時相當惆悵。那麼可以用這個方法來找到是哪個程序在佔用該檔案: 1:開啟工作管理員選擇“效能” 2:單擊下部的“資源監視器” 3:選擇“CPU”,在下部可以看到“關聯的控制代碼”搜尋框 4:在該搜尋

查詢Linux系統中的佔用磁碟空間最大的前10個檔案資料

   當磁碟空間被迅速佔用的時候,我們必須找出一些,比較佔用磁碟空間的檔案或者資料夾。通常情況下,最有可能找出佔用磁碟空間檔案或資料夾的地方,主要是 /tmp or /var or /home。       目前沒有單個命令來

git提交忽略檔案資料

在專案根目錄下面 新增 .gitignore檔案 檔案中每一行表示需要忽略的檔案的正則表示式。   .gitignore檔案過濾有兩種模式,開放模式和保守模式 1. 開放模式負責設定過濾哪些檔案和資料夾 例如: /target/ 表示專案根目錄下的target

通過瀏覽器載入程式選擇檔案路徑方法

通過瀏覽器瀏覽器選擇預覽檔案儲存路徑 在工作中遇到這個需求,需要選擇檔案的儲存這裡我列舉兩種方法供大家參考: 1、通過SHBrowseForFolder實現具體程式碼和講解如下: wchar_t szPath[MAX_PATH]; //存放選擇的目錄路徑 Zero

linux 將一個伺服器上的檔案資料夾拷貝到另一個伺服器上

複製檔案或目錄命令: 複製檔案: (1)將本地檔案拷貝到遠端 scp 檔名使用者名稱@計算機IP或者計算機名稱:遠端路徑 本地192.168.1.8客戶端 scp /root/install.* [email protected]:/usr/local