Fatal编程技术网
  • javascript/
  • Javascript 上传部分页面或页面中的一张图片-第一张（尽快）

Javascript 上传部分页面或页面中的一张图片-第一张（尽快）

javascript jquery angularjs jsp

Javascript 上传部分页面或页面中的一张图片-第一张（尽快）,javascript,jquery,angularjs,jsp,Javascript,Jquery,Angularjs,Jsp,我使用的是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> <di

我使用的是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>
我需要尽快加载图片“mainImage，jpg”，并将其显示在页面上

优选地，顺序将是这样或更好：

second.html
mainImage.jpg
first.html 
...........
如果不知道图像URL并在调用它们之前预加载它们，这是不可能的

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

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

无法将图像请求与html镇定混合，因为它们是两个独立的操作。一个是为流编写器编写字符串，另一个是对外部资源发出网络请求

如果您试图改变这一点，唯一的希望就是在请求外部资源之前缓存它们

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

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


…其他相关的头元素。。。
（函数缓存（）{
var mainCache=新图像（）；
mainCache.src=“mainImage.jpg”；
})()
这种方法至少会在页面启动时立即启动加载过程，但这取决于页面呈现时它可能仍在加载的图像大小。

一个令人讨厌的攻击不是不包括图像以外的任何资源，而是在触发DOMContentLoaded后立即使用AJAX加载它们吗？这样，在呈现页面时会显示图像，随后会添加剩余的资源。@eli-是的，您还可以提供许多站点用作“加载屏幕”的内容，在图像填充到预加载缓存时显示某种动画。这不是一个可怕的黑客，这当然是一个可行的选择。 
<head>
    ...other related head elements...
    <script>
        (function cache(){
           var mainCache = new Image();
           mainCache.src = "mainImage.jpg";
        })()
    </script>