將圖像存儲到數組中

我想在JS中創建一個可搜索的數組。我希望數組能像只顯示圖像一樣工作，然後使用'標籤'來過濾和搜索這個數組。將圖像存儲到數組中

如果我沿着這個線的東西：

function NotebookListCtrl($scope) { 
    $scope.notebooks = [ 
    {"name": "Lenovo", 
    "processor": "Intel i5", 
    "age": 2011}, 

//more notebooks... 

    {"name": "Toshiba", 
    "processor": "Intel i7", 
    "age": 2010}, 
    ]; 
    $scope.orderList = "name"; 
}

有沒有一種方法，我可以使用的線沿線的東西...

notebooks[0] = new Image(); 
notebooks[0].src = 'images/img/image1.jpg';

所以，當筆記本電腦項目[ 0]會顯示，它會顯示圖像以及它？相對較新的JS和我試圖把東西拼湊在一起。謝謝您的幫助！

來源

2015-02-24 knocked loose

-2

無需創建新圖像。這更多的是HTML和比什麼都中的圖像顯示：

function NotebookListCtrl($scope) { 
    $scope.notebooks = [ 
    {"name": "Lenovo", 
    "processor": "Intel i5", 
    "age": 2011, 
    "src": 'images/img/image1.jpg' 
    }, 

//more notebooks... 

    {"name": "Toshiba", 
    "processor": "Intel i7", 
    "age": 2010, 
    "src": 'images/img/image2.jpg' 
    }, 
    ]; 
    $scope.orderList = "name"; 
} 

<div 
    ng-repeat="notebook in notebooks | orderby: orderList"> 
    <p>name: {{notebook.name}}</p> 
    <p>processor: {{notebook.processor}}</p> 
    <p>age: {{notebook.age}}</p> 
    <img 
     ng-if="notebook.src" 
     ng-src="{{notebook.src}}"> 
</div>

只需設置圖像源以及使用NG-src屬性在HTML中設置圖像源。

來源

2015-02-24 19:32:47

感謝您的回答，我從來沒有這樣想過。什麼是加載時間看做這種方法，說100個圖像..？如果使用這種方法，我能夠實現一個lazyload嗎？ – 2015-02-24 19:36:54

這是你使用角度的假設（如果你以前從未使用JS，它本身就是一個野獸） – Drifter 2015-02-24 19:38:17

我從來沒有使用角度，我想我應該得到常規JS的句柄。我在大學上過幾門課，但從未卡住，因爲我是更前端/平面設計，只是拿起HTML/CSS的樂趣。 – 2015-02-24 19:39:37

我的建議是避免使用Image對象，除非你需要在你的JS代碼預先加載圖片時，只存儲陣列中每個產品的IMG SRC路徑就像：

$scope.notebooks = [ 
    {"name": "Lenovo", 
    "processor": "Intel i5", 
    "age": 2011 
    "img": "images/img/image1.jpg"  
    }, 
// ...

然後在您的img標籤中，您可以相應地指向每個產品的來源。

您可以配置您的Web服務器以告訴瀏覽器緩存圖像，以便增強img加載時間。

來源

2015-02-24 19:34:31 guilhebl

如果您想預先加載一些圖像，則此圖像對象之外可能是有用的。 – Drifter 2015-02-24 19:38:55

@Drifter是的，你也可以讓你的服務器告訴瀏覽器使用Expires Headers來緩存某些圖片類型，這會讓用戶下一次登陸頁面時變得更快。 – guilhebl 2015-02-24 19:44:52

將圖像存儲到數組中

回答

相關問題