angularjs - Chrome: Prevent image reload when rebuilding image elements -

Using fingerprints:

I am displaying a list of ng-repeating images. When I reboot and rebuild the model (get new data from the backend), then I'm displaying the previous images.

I understand that these are the new elements created by NG-repeat, but the image is SRCS. Unlike IE or Firefox, Chrome tries to get a 403 for those similar pictures and then presents them.

This causes a flicker Images on IE and Firefox come from the cache. No hits on the server to check image changes. No flicker

How can I stop it? Should pictures be served with some cache headers? I tried to get them to load the images to a dataurl, but then I hit the CORS problem, and the proxies will have to do those images on the backend

.

Thanks

Some fixes will relate to preloading images in Javascript and its Will display them later

  function load images (arrayfomos) {var imageNumber = 0; $ (ArrayOfImgs) .Each (function ()) ((new image)) src = this ;. (if arrayOfImgs.length == image NUMBER) $ scope.showImages true =; another image NUMBER ++;}); } // Usage: Load images (['img1.jpg', 'img2.jpg']);  

If you retrieve the pictures from the backend, then its successful promise

I hope it helps you

that Check the example images that retrieve the backend:

  $ scope.loading = true; . GetImages () then (function (response) {var objects = response.results; on listImages = []; angular.forEach (objects, function (item) {listImages.push (item.UrlImage);}); function preload (ArrayOfImages ) {Var numimages = 0; $ (arrayOfImages) .each (function () {var img = (new image); img.src = this; $ (img) .load (function () {numImages ++; if (Numimages == arrayOfImages.length) {$ scope.loading = false;}});});} preload (list images ;;});