0

我们有一个图片较多的网站，所以图片加载的顺序很重要。

一段 JS<link type="text/css" ...>为 CSS 注入标签，然后通过注入标签继续预加载一些图像<img>。问题是我希望 CSS 引用的图像在预加载图像之前加载，但这并没有发生。它下载 CSS，然后是预加载的图像，然后是 CSS 引用的图像。

除了设置超时，我还能做什么？（对某些人来说太短，对其他人来说太长）

4

1 回答 1

2

一般来说，您可以控制通过 javascript 加载的内容。你的麻烦是你不知道动态加载的css什么时候准备好，所以你不能决定什么时候加载什么。

当这种动态加载的 css 准备好时，一些浏览器会引发 on-load 事件，但这种方法存在问题。我花了几个小时自己寻找一个好的解决方案。这是我在 ownCloud 系统的应用程序“FluXX Compensator (Y)”中提出的：

OC.FluXX.transitions=$('<link/>',{
    'rel':'prefetch',
    'type':'text/css',
    'href':OC.filePath('fluxx_compensator','css','transitions.css')

toggle: function(handle){
    // temporarily include transition style rules if not yet present (should not be!)
    var transitions=OC.FluXX.transitions.clone().attr('rel','stylesheet').attr('id','fluxx-transitions').appendTo('head');
    // some safety catch for browsers that do not fire the load event when stuff is loaded (safari)
    var timer = setTimeout(function(){$('head #fluxx-transitions').off('load');OC.FluXX.time(handle);},500); // should be preloaded...
    // the more elegant approach however is to react on the load event (_if_ fired)
    $('head #fluxx-transitions').one('load',function(){clearTimeout(timer);OC.FluXX.time(handle);});
} // OC.FluXX.toggle

如您所见，我克隆了一个对象（在加载页面时定义），它表示对 css 资源的引用。我预加载它，这样我只需要在需要时（在我的情况下多次）克隆和删除它，而不必通过网络加载它。我将此克隆放入文档的头部。我设置了一个计时器作为安全锁，但尝试对加载事件做出反应。如果没有引发该事件（例如 MS-Windows 下的 Safari 不会引发它），那么至少会捕获超时。这是我能找到的快速反应（事件驱动）和安全（超时）的最佳组合。到目前为止工作正常...

希望这可以帮助 ;-）

于 2013-08-08T19:37:11.210 回答