在下载“大图片列表”之前，加载页面的所有CSS和JS
[英]Load the all css & js for the page before downloading the “big list of images”
问题描述
我有一个网站，该网站在页面中显示大约20个自动播放的幻灯片列表（每个幻灯片包含4-5张图像）。 现在的问题是，这需要花费很长的时间来加载网站（当然，因为会有很多图像），但是我想首先优先加载所有必要的css和js文件，以便其他组件在开始下载图像之前，页面已正确呈现。
那么...有没有办法设置请求资源的优先加载顺序？
3 个解决方案
解决方案1
1 已采纳 2011-09-29 20:19:34
有没有办法设置请求资源的优先加载顺序
是的-将它们按顺序放在HTML文件中！
我想首先优先加载所有必要的css和js文件，以便在图像开始下载之前正确呈现页面上的其他组件。
那是另一个问题。
在知道大多数元素的尺寸之前，无法正确呈现页面组件。 因此，如果页面布局中还有其他图像，则需要首先加载这些图像，或者在标记中指定其宽度和高度属性。
如果您使用纯HTML来加载幻灯片图像，则它们会与布局的其余部分混合在一起，听起来您别无选择，只能从Javascript加载所有幻灯片图像，以及其他注释和答案。
解决方案2
0 2011-09-29 20:43:03
更好的方法是使用dom创建元素，使div甚至img标签src为空白，然后使用innerHTML在onload函数中将它们与所需的图像一起加载：
function images(){
var place_to_put_image = document.getElementById("image_div");
place_to_put_image.innerHTML = "<img src=\"your_image_here\"></img>";
}
<body onload="images()>
<div id="image_div></div>
</body>
您可以将图像放在一个数组中，然后将div的innerHTML或其他内容分配给该数组，如果您希望它们都位于同一位置，或者可以将onload放在div或希望图像加载到的任何位置。
解决方案3
0 2011-09-29 20:43:34
您可以通过几种方法来完成此操作，但是它们都涉及到实际上并未将图像放入HTML中-至少是不正确的。 我喜欢这样做的一种方法是将图像src URL添加到另一个属性（例如alt （对可访问性不太好）或rel 。 另外，为所有图像提供一个类，该类将用于与JS挂钩。
<img alt="images/foo.jpg" class="loadlater" />
然后在您的JS中，使用class="loadlater"获取所有元素，并将源设置为alt值。
img.src = img.alt;
您没有提到jQuery。 如果您使用的是jQuery，则交换属性的命令如下所示：
$('.loadlater').each(function() { this.src=this.alt; });
然后，无论何时何地调用此命令，都会加载图像。 在CSS和js完成加载后，您可能要调用它-可能是document.load函数。 同样，如果您使用的是jQuery，则它看起来像这样：
$(function()
{
$('.loadlater').each(function() { this.src=this.alt; });
});
JS功能可在页面加载之前预加载图像
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.