将图像存储到数组中

我想在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

将图像存储到数组中

回答

相关问题