gpt4 book ai didi

javascript - 上传页面的一部分或页面中的一张图片 - 第一个(尽快)

转载 作者:行者123 更新时间:2023-11-30 14:41:01 26 4
gpt4 key购买 nike

我正在使用 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
...........

最佳答案

如果不知道图像 url 并在调用它们之前预加载它们,这是不可能的。

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

您所观察到的情况之所以发生,是因为您的 jsp 服务器正在编写 html。所以html都写进了源码的stream writer中。一旦源代码被发送到浏览器,它就会呈现源代码。它将请求在源中遇到的图像。

无法将图像请求与 html 组合在一起,因为它们是两个独立的操作。一个是为流编写器编写字符串,另一个是对外部资源进行网络请求。

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

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

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

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

关于javascript - 上传页面的一部分或页面中的一张图片 - 第一个(尽快),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49660408/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com