Question

我正在使用AngularJS 1.4，这是我的页面的代码

<div ng-app="myApp">
   <div ng-controller="mainController">
     <div ng-controller="first">       //  this is ng-include - first.html
        <img id="bannerImage"/> 
     </div>
     <div ng-controller="first2">       //  this is ng-include - first2.html
        <img id="bannerImage1"/> 
     </div>     
     <div ng-controller="first3">       //  this is ng-include - first3.html
        <img id="bannerImage2"/> 
     </div>                                   
     <div ng-controller="second">      //  this is ng-include - second.html
         <img id="mainImage"/>
      </div>
   </div>
</div>

我需要先在“second.html”中加载“mainImage.jpg”，但是按控制台判断按以下顺序加载：

first.html
first2.html
first3.html
second.html
bannerImage.jpg
mainImage.jpg 
mainImage2.jpg
mainImage3.jpg             as include order in page

我需要尽快加载图片“mainImage，jpg”并将其显示在页面上。

最好是订单类似或更好：

second.html
mainImage.jpg
first.html 
...........

Answer 1

如果不知道图片网址并在调用它们之前预先加载它们是不可能的。

在您描述的加载模板页面的场景中，似乎这不是一个选项。

您正在观察的内容之所以发生，是因为您的jsp的服务器正在组成html。所以html全部组成了源代码的流编写器。将源代码发送到浏览器后，它会呈现源代码。它将在源中遇到图像请求。

无法将图像请求与html压缩混合在一起，因为它们是两个独立的动作。一个是为流编写器组成一个字符串，另一个是为外部资源发出网络请求。

如果您尝试更改此选项，唯一的希望是在请求外部资源之前对其进行缓存。

尝试预加载图像的一种方法是使用JavaScript将其保存到文档头部的变量

<head>
    ...other related head elements...
    <script>
        (function cache(){
           var mainCache = new Image();
           mainCache.src = "mainImage.jpg";
        })()
    </script>

这种方法至少会在页面启动时立即开始加载过程，但是根据图像大小，它可能仍然在页面渲染时加载。

从页面上传部分页面或一张图片 - 第一个（尽快）

1 个答案: