javascript - 在打开的网站上加载图像

标签 javascript html angularjs

我的index.html:

<body id="body" ng-app="myApp" ng-controller="Main" ng-init="init()">
</body>
<script src="app.js"></script>

我的app.js:

var app = angular.module('myApp', []);

app.controller('Main', ['$scope',function($scope){
    $scope.test = 'Hiiii!';

    // Init background
    $scope.init = function () {
        var rand = Math.floor(Math.random() * 3) + 1  
        var path = "/images/image"+rand+".jpg";
        var img = new Image();
        var body = document.getElementById('body');
        img.onload = function() {
            body.appendChild(img);
        };
        img.src = path;
    };
}]);

我的 init() 函数肯定会被执行,但我不知道为什么我的图像没有在主体上设置。我错过或忽略了什么?

正文中没有显示 img 标签

最佳答案

原因是因为图像在加载之前不会被附加,但在附加之前也不会被加载。如果您想隐藏图像直到加载完成,请尝试以下操作:

var img = new Image();
var body = document.getElementById('body');
img.src = path;
img.style.visibility = "hidden";
img.onload = function() {
    img.style.visibility = "visible";
};
body.appendChild(img);

关于javascript - 在打开的网站上加载图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33598083/

相关文章:

javascript - 具有三个参数的自执行匿名函数有何意义?

c# - 如何使用 asp.net 在母版页中编写内部 jquery 代码?

javascript - toString().length 在一个有零且只有零的数字上总是返回 0

javascript - 限制或延迟来自 AngularJS 服务的 http 请求

javascript - 在函数中声明 Javascript 数组

javascript - Node.js/Express - 如何考虑客户端数据库工作? (例如不能使用 require())

javascript - Flask:将变量传递给 JavaScript 时出错

javascript - 无法在 addEventListener 调用的函数内调用函数

html - 根据是否有任何共享同一类的 sibling 使用 CSS 选择一个类

javascript - 在客户端自动更新 html/Angular 应用程序