Question

我们有一个图片密集的网站，因此图片加载的顺序很重要。

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

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

Answer 1

通常，您可以通过javascript控制加载的内容。你的麻烦在于你不确切知道动态加载的css何时准备就绪，所以你无法决定何时加载什么。

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

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资源的引用。我预先加载它，以便我只需要克隆并在需要时删除它（在我的情况下几次），而不必通过网络加载它。我把这个克隆放到文档的头部。我设置了一个计时器作为安全捕获，但尝试对on load事件作出反应。如果没有引发该事件（例如MS-Windows下的Safari没有引发它），那么至少超时会捕获。这是我能找到的快速反应（事件驱动）和安全（超时）的最佳组合。到目前为止工作正常......

希望这会有所帮助; - ）

检测何时加载动态注入的CSS

1 个答案: