标签: preloading

<!—Firefox Prefetching -->
<link rel="prefetch" href="http://www.example.com/page2.html">

<!—Chrome Prefetching -->
<link rel="prerender" href="http://www.example.com/page2.html">

如果我在页面上使用Javascript进行预呈现/预取(例如Google Analytics JS),那么prerender/prefetch会在页面上执行Javascript吗？或者它是否会延迟任何JS的执行,直到用户实际请求页面为止？

我有一个托管在CMS(Squarespace)上的照片库页面,它有一些自己的脚本,可以异步加载缩略图.

然而,实际的大图像没有预加载,所以我决定将自己的脚本添加到混合中,只是让浏览器将这些较大的图像加载到后台的缓存中,如下所示:

(function($) {
  var cache = [];
  // Arguments are image paths relative to the current page.
  $.preLoadImages = function() {
    var args_len = arguments.length;
    for (var i = args_len; i--;) {
      var cacheImage = document.createElement('img');
      cacheImage.src = arguments[i];
      cache.push(cacheImage);
    }
  }
})(jQuery)

$(window).load(function(){
$.preLoadImages(
    "/picture/1.jpg",
    "/picture/2.jpg", //etc.
   );
});

我将我的代码放在$(window).load()中,因为这是一个后台脚本,它甚至根本不运行,它只是为了提高性能.

但是,我认为这个脚本以某种方式阻止了CMS自己的缩略图预加载脚本.

我对吗？最重要的是,有没有办法规定我的脚本只在页面上的所有其他脚本运行后运行？

干杯

我正在尝试找到一个图像预加载器脚本.

虽然我发现了一些,但它们都不支持在预加载完成时触发的事件.

有谁知道会这样做的任何脚本或jQuery插件？

希望这个问题适合stackoverflow - 如果没有,请随时将其删除.

我正在使用Video.js在客户的网站上播放MP4格式的视频.播放器使用html5视频和Adobe Flash Player作为后备.(在我的情况下,似乎总是使用Flash,所以我不知道本机html5播放器中是否存在问题.)

视频仅在*.mp4文件完全加载后才开始播放.所以没有缓冲几秒钟.在开始播放之前,浏览器必须完全下载该文件.

当视频很长时,访问者必须等待很长时间才能看到视频正常工作.

现在的问题是,是浏览器,脚本(video.js)还是创建该问题的视频文件.

但是在videojs.com网站上,视频在加载时正在播放,因此工作正常.因此我认为它不可能是浏览器.

还有其他人有这个问题吗？我该如何解决这个问题？
非常感谢任何建议!

谢谢

马克斯

在我的控制器操作中,我included查看所需的所有关联,以避免多次调用数据库.(我试图将视图层隔离为仅渲染控制器收集的数据).

我发现视图仍然与数据库通信(17个查询):

这些17 extra queries都不是必需的.因为我已经从控制台测试了控制器查询,并且它成功地收集了部分所需的所有数据_dropdown(在5个查询中)而没有任何进一步的数据库通信.

这是我的控制器中的查询,它可以避免这个N+1问题.(包括视图中调用的所有变量)

这是下拉代码:

- @messages.each do |message|
    %li.conversation-container
        %a{href: conversation_path(message.conversation_id)}
            - if message.sender != current_user 
                .notification-avatar{style: "background: url(#{message.sender.avatar_url}); background-size: contain; background-repeat: no-repeat; background-position: 50% 50%;"}
            - else
                - other_participant = message.conversation.conversation_participants.select{|p| p.user_id != current_user.id }.first.user 
                .notification-avatar{style: "background: url(#{other_participant.avatar_url}); background-size: contain; background-repeat: no-repeat; background-position: 50% 50%;"}
            %p
                %strong
                    - if message.sender != current_user 
                        = message.sender.name
                    - else
                        = other_participant.name
                %br
                - if message.sender == current_user …

使用Zurb的Foundation 4.1.5(最新版本),Orbit图像滑块非常有效.不幸的是,它看起来真的是前几秒所有图像都显示为一个巨大的项目符号列表.然后JavaScript开始了,一切都很美.

我该如何避免最初的丑陋？我可以预装图像吗？我可以随身携带一切display: none或者visibility: hidden直到它准备好了吗？

我正在开发一个Web应用程序,允许用户使用Passport.js通过Facebook登录.我的代码如下:

/* Passport.js */
var passport = require('passport');
var FacebookStrategy = require('passport-facebook').Strategy;

/* DB */
var User = require('../models/db').User;

exports.passport = passport;

passport.use(new FacebookStrategy(
  {
    clientID: '<ID>',
    clientSecret: '<SECRET>',
    callbackURL: 'http://localhost:4242/auth/facebook/callback'
  },
  function (accessToken, refreshToken, profile, done) {
    console.log(profile.provider);
    User.findOrCreate({ "provider": profile.provider,"id": profile.id },
                      function (err, user) { return done(err, user); });
  }
));

passport.serializeUser(function(user, done) {
  console.log('serialize');
  done(null, user.id);
});

passport.deserializeUser(function(id, done) {
  console.log('deserialize');
  User.findOne({"id": id}, function(err, user) {
    done(err, user);
  });
});

这段代码适用于Firefox; 我的用户通过Facebook进行身份验证,然后成功路由.但是,在Chrome上,我有时会收到以下错误:

FacebookTokenError: This authorization code …

我正在使用以下技术预加载在悬停按钮时作为CSS背景图像应用的图像:

#preload_area {
  background-image: 
    url(../images/image1.svg),
    url(../images/image2.svg);
  width: 0px;
  height: 0px;
  display: inline;
}

还试图预加载一个图像,这样:

#preload_area {
  background: url(../images/image1.svg) -9999px -9999px no-repeat;
}

这些都不起作用:在硬刷新后,第一次悬停我的按钮时,我仍然看到一个闪烁(对应于加载悬停图像).显然,在第一次之后,再也没有眨眼了.

为什么不使用Chrome？(它适用于Firefox)

以下来自 Mozilla 的网络文档Preloading content with rel="preload"导致 chrome 中关于链接类型的错误：

<head>
  <meta charset="utf-8">
  <title>Web font example</title>

  <link rel="preload" href="fonts/cicle_fina-webfont.eot" as="font" type="application/vnd.ms-fontobject" crossorigin="anonymous">
  <link rel="preload" href="fonts/cicle_fina-webfont.woff2" as="font" type="font/woff2" crossorigin="anonymous">
  <link rel="preload" href="fonts/cicle_fina-webfont.woff" as="font" type="font/woff" crossorigin="anonymous">
  <link rel="preload" href="fonts/cicle_fina-webfont.ttf" as="font" type="font/ttf" crossorigin="anonymous">
  <link rel="preload" href="fonts/cicle_fina-webfont.svg" as="font" type="image/svg+xml" crossorigin="anonymous">

  <link rel="preload" href="fonts/zantroke-webfont.eot" as="font" type="application/vnd.ms-fontobject" crossorigin="anonymous">
  <link rel="preload" href="fonts/zantroke-webfont.woff2" as="font" type="font/woff2" crossorigin="anonymous">
  <link rel="preload" href="fonts/zantroke-webfont.woff" as="font" type="font/woff" crossorigin="anonymous">
  <link rel="preload" href="fonts/zantroke-webfont.ttf" as="font" type="font/ttf" crossorigin="anonymous">
  <link rel="preload" href="fonts/zantroke-webfont.svg" as="font" type="image/svg+xml" crossorigin="anonymous">

您可以在 GitHub 上 …

我有两个模块，我们称它们为EagerModule和PrealodedModule。它们都有自己的特征缩减器和效果。

EagerModuleAppModule已在应用程序中急切加载，这意味着它位于的导入列表中。

@NgModule({
    imports: [
        // .. other modules
        EagerModule
    ]

PreloadedModule另一方面，它是延迟加载的，但由于我使用的是preloadingStrategy: PreloadAllModules，我们可以说它基本上是预加载的（意思是，它是在加载所有急切模块之后加载的）。

PrealoadedModule我正在尝试从a 的组件中分派一个操作EagerModule。然而，效果似乎没有被初始化，因为我的操作没有执行它应该执行的 http 请求。我尝试通过仅在状态选择器中有值后调度此操作来破解此操作PreloadedModule，但是，这也不起作用。

我可以让这个工作的唯一方法是如果我PreloadedModule急切地加载，但这不是我想要实现的。

那么，如何使预加载模块的效果在另一个模块中发挥作用呢？