Question

使用AngularJS：

我正在显示带有ng-repeat的图像列表。当我重置并重建模型（从后端获取新数据）时，我正在显示与以前相同的图像。

我知道这些是由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'
]);

如果您要从后端重新获取图像，请将其用于成功承诺

我希望它可以帮助你

检查示例从后端重新搜索图像：

$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);

                 });

Chrome：重建图像元素时防止图像重新加载

1 个答案: