Chrome: Предотвращение перезагрузки изображения при восстановлении элементов изображения

Question

Использование AngularJS:

Я отображающие список изображений с нг-повтора. Когда я сбрасываю и восстанавливаю модель (получаю новые данные из бэкэнд), я показываю те же изображения, что и раньше.

Я понимаю, что это новые элементы, созданные ng-repeat, но изображения srcs одинаковы. В отличие от IE или firefox, Chrome пытается и получает 403 для тех же изображений, а затем отображает их.

Это вызывает мерцание. В IE и Firefox изображения поступают из кеша. Не ударяйте по серверу, чтобы проверить изменения изображения. Нет мерцания.

Как я могу предотвратить это? Должны ли изображения обслуживаться с некоторым заголовком кеша? Я попытался загрузить изображения в dataurl, но затем я попал в проблему CORS и должен был проксировать эти изображения на сервере, чтобы получить их.

Возможно, связанные с: Chrome sometimes reloads image after jQuery .appendTo, recieves 304

Благодаря

Answer 1

Некоторые исправления будут связаны с предварительной загрузкой изображений в JavaScript и после этого вывести их

function loadImages(arrayOfImgs) { 
    var imageNumber=0; 
    $(arrayOfImgs).each(function(){   
     (new Image()).src = this; 
     if(arrayOfImgs.length == imageNumber) $scope.showImages = true; 
     else imageNumber++; 
    }); 
} 

// Usage: 
loadImages([ 
    'img1.jpg', 
    'img2.jpg' 
]); 

если вы retriving изображения из бэкэнда использовать его в Успешное обещание

Надеюсь, это вам поможет

Проверьте пример retrinving изображения из бэкэнда:

$scope.loading = true; 
       getImages().then(function (response) { 
        var objects= response.results; 

        var 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(listImages); 

       });