0

OpenCart を使用したことがあり、正しいマークアップと最適化にこだわっている場合は、* がいかに面倒であるかを既にご存じでしょう。

テンプレート内のphp変数に依存してjsを実行するため、テンプレート全体にインラインjsがあります。

私は現在、このがらくたをすべてテンプレートから移動し、リンクされたすべての js ファイルを、本来あるべきページの下部に移動する OC の HTML5 フォークに取り組んでいます。

問題は、今これを望んでいるクライアントがいて、このすべてのスクリプトを適切に移動するのに数週間かかることです。そのため、すべてのファイルが処理された後にのみ実行されるように、インライン スクリプトを延期する信頼できる方法を見つけようとしています。下部にロードされます。

script タグで defer を使用してみましたが、Chrome はそれを見つけるとすぐに実行し、他のほとんどのブラウザも実行すると思います。

たとえば、カルーセル モジュールは次のとおりです。

<div id="carousel<?php echo $module; ?>" class="es-carousel-wrapper">
   <div class="es-carousel">
      <ul>
      <?php foreach ($banners as $banner) { ?>
         <li>
             <a href="<?php echo $banner['link']; ?>">
                 <img src="<?php echo $banner['image']; ?>" 
                    alt="<?php echo $banner['title']; ?>" 
                    title="<?php echo $banner['title']; ?>" />
             </a>
         </li>
      <?php } ?>
      </ul>
   </div>
</div>
<script type="text/javascript" defer>
    $('#carousel<?php echo $module; ?>').elastislide({
        speed       : 450,
        easing      : '',
        imageW      : 290,
        <?php if ($limit > 3): ?>
        minItems    : <?php echo $scroll; ?>
        <?php else: ?>
        minItems    : 1
        <?php endif ?>
     });
     $(window).triggerHandler('resize.elastislide');
</script>

ご覧のとおり、テンプレート ページに保持し、php の変数を使用する方がはるかに簡単です。明らかにこれを行う正しい方法は、変数を js に実装し、後で呼び出すことです。これは私が別のクライアントに対して行ったことです。しかし、それには長い時間がかかりました。

defer を使用してこれを実装する信頼できる方法はありますか?

ありがとう。

-ヴィンス

4

0 に答える 0