Question

所有。我想知道如何使用指令来使用不同的图像源，但我不确定它是好还是坏。有人可以给我一些建议吗？这是我的代码 HTML

<img responsive-src 
    mobile="test1"  
    desktop="test2" />

JS指令

app.directive('responsiveSrc',function($window, $timeout){

    return {
        restrict: "AEC",
        scope: {
            mobile: '=',
            desktop: '='
        },
        link: function(scope, element, attrs, controller, transcludeFn){

            scope.width = $window.innerWidth;

            angular.element($window).on('resize load', function(){

                scope.width = $window.innerWidth;

                $timeout(function(){

                    if(scope.width >= 768){
                        element.attr('src', scope.desktop);                     
                    } else {

                        element.attr('src', scope.mobile);
                    }

                }, 300);


                // scope.$digest();
            })

        }

    }
});

JS控制器

  app.controller('myCtrl', ['$scope', '$http', function($scope, $http){

        $scope.test1 = "http://lorempixel.com/400/200/sports";
        $scope.test2 = "http://lorempixel.com/400/400/sports";

    }]);

我看到一些人使用摘要，但是如果我使用resize，那么当窗口调整大小时，值会不断变化，那么我还应该使用摘要吗？它实际起作用了什么？

Answer 1

你提出的问题是一个但是含糊不清，但我从这里理解的是这个问题。范围。$ digest（）用于手动触发摘要循环。角度1中的摘要循环是角度用于触发数据模型的观察者以检查自上一个摘要周期以来的数据变化（用于检查数据变化的非专业人员术语）。还有其他角度指令触发摘要周期。例如，您在代码中使用的$ timeout将触发摘要周期，因此，您编写的代码可能会起作用。另外，我们通常不尝试使用范围。$ digest而是调用scope.apply（），它将调用$ rootScope。$ digest（）函数。

Answer 2

使用srcset代替......所有浏览器本机支持。

<img src="small.jpg" srcset="medium.jpg 1000w, large.jpg 2000w" alt="my alternate text">

了解更多

https://css-tricks.com/responsive-images-youre-just-changing-resolutions-use-srcset/

<img src="image-src.png" srcset="image-1x.png 1x, image-2x.png 2x, image-3x.png 3x, image-4x.png 4x">

这将节省您的时间，浏览器渲染不必要的java脚本。

响应源图像的角度1方式，好还是坏？

2 个答案: