2

设置：

rails 3.2 - 因为还没有 4.0 ;-)

fitvids ( http://fitvidsjs.com ) - 用于响应式 iframe

highcharts ( http://www.highcharts.com ) - 对于一些统计...

和一个带有循环的视图，因此有多个 iframe，例如：

<%= video.each do |video| %>    
    <div class="video-embed">    
      <iframe src="http://www.youtube.com/embed/<%= video.host_video_id.strip %>?modestbranding=0&amp;autohide=1&amp;rel=0&amp;fs=1&amp;HD=1&amp;showinfo=0&amp;controls=0?wmode=transparent"  title="YouTube video player" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen="">
      </iframe>
    </div>
<% end %>

适合视频：

$(".video-embed").fitVids();

当有超过 10 个 iframe 时，页面似乎会在 highcharts 渲染开始之前加载 15 秒。它看起来像打嗝。

我尝试了异步方法：

(function(d){
  var iframe = d.body.appendChild(d.createElement('iframe')),
  doc = iframe.contentWindow.document;

// I tried to include the fitvid code here instead of the following line
  iframe.style.cssText = "position:absolute;width:200px;height:100px;left:0px;";
  
  doc.open().write('<body onload="' + 
  'var d = document;d.getElementsByTagName(\'head\')[0].' + 
  'appendChild(d.createElement(\'script\')).src' + 
  '=\'\/path\/to\/file\'">');
  
  doc.close(); //iframe onload event happens

  })(document);

它的行为似乎确实有所不同，但显然打破了fitvid。

是否可以将 fitvids 包含到 onload js 中？是否有 b）任何其他方式使其异步（在使用 fitvids 时）加载 iframe 以改善视觉体验？即只渲染可见的iframe，并在滚动事件上渲染更多......使用fitvids？

谢谢你

j

4

0 回答 0