2

設定：

rails 3.2 - 4.0 がまだ来ていないので ;-)

fitvids ( http://fitvidsjs.com ) - レスポンシブ iframe 用

ハイチャート ( 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 がある場合、ハイチャートのレンダリングが開始される前に、ページが 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 が壊れています。

a) fitvids を onload js に含めることは可能ですか? b) ビジュアル エクスペリエンスを向上させるために iframe を (fitvids を使用しながら) 非同期にロードする他の方法はありますか? つまり、表示されている iframe のみをレンダリングし、スクロール イベントでさらにレンダリングします ... fitvids を使用しますか?

ありがとうございました

j

4

0 に答える 0