sharataka sharataka - 6 months ago 15
Javascript Question

How to prefetch an image in AngularJS?

I am trying to prefetch an image in my Angular app that sits within a Chrome plugin.

In the controller, I have:

$scope.nextlocation = 'http://i.imgur.com/Vzidbt4.gif';


In my view, I have:

<link rel="prefetch" href="{{nextlocation}}">


When I load the page, I get an error saying:

GET chrome-extension://jlkgcdcdoooiaeamkhagpdolhgjgfgem/%7B%7Bnextlocation%7D%7D net::ERR_FILE_NOT_FOUND


When I hardcord the image in the doc, like below, it works fine.

<link rel="prefetch" href="http://i.imgur.com/Vzidbt4.gif">


How do I get this to work so that it dynamically updates?

Answer
<link rel="prefetch" href="http://i.imgur.com/Vzidbt4.gif">

Change the above to:

<link rel="prefetch" ng-href="{{nextlocation}}">
Comments