-1

私はPHPとJqueryが初めてです。Jqueryを使用して画像をライトボックスに表示する部門があります。しかし、なぜ画像の読み込みが遅いのかわかりません。
以下はコードです：

<div class="image-zoom" rel="lightbox" id="gallery">
        <div id="album1" style="margin-right:18px;" rel="lightbox">
            <?php
            if (isset($albums[0])) {
                $i = 1;
                foreach ($albums[0]['photos'] as $photo) {
                    if ($i == 1) {
                        ?>
                        <a href="<?= $photo ?>" rel="lightbox">
                            <img src="<?= $photo ?>" width="214" height="160" />
                        </a>
                        <div class="zoom-magnifier" id="gallery">
                            <a href="<?= $photo ?>" rel="lightbox">
                                <img src="<?php echo Yii::app()->theme->baseUrl; ?>/images/zoom-icon.png" id="zoom"/>
                            </a>
                            <div id="more-text" align="left" ><?=$albums[0]['title']?></div>
                        </div>
                        <?php

                    } else {
                        ?>
                        <a href="<?= $photo ?>" rel="lightbox"></a>
                        <?php
                    }
                    $i++;
                }              
            }
            ?>
        </div>
        <div id="album2" rel="lightbox">
            <?php
            foreach (array(1, 0) as $album_id) {
                if (isset($albums[$album_id])) {
                    $i = 1;
                    foreach ($albums[$album_id]['photos'] as $photo) {
                        if ($i == 1) {
                            ?>
                            <a href="<?= $photo ?>" rel="lightbox">
                                <img src="<?= $photo ?>" width="214" height="160" />
                            </a>
                            <div class="zoom-magnifier">
                                <a href="<?= $photo ?>" rel="lightbox">
                                    <img src="<?php echo Yii::app()->theme->baseUrl; ?>/images/zoom-icon.png" id="zoom1"/>
                                </a>
                                <div id="more-text2" class="more-txt-link"><?=$albums[$album_id]['title']?></div>
                            </div>
                            <?php
                        } else {
                            ?>
                            <a href="<?= $photo ?>" rel="lightbox"></a>
                            <?php
                        }
                        $i++;
                    }                        
                    break;
                }
            }
            ?>
        </div>

以下は、ライトボックス スクリプトです。

<script type="text/javascript" src="<?php echo Yii::app()->theme->baseUrl; ?>/js/jquery.lightbox-0.5.js"></script>
<link rel="stylesheet" type="text/css" href="<?php echo Yii::app()->theme->baseUrl; ?>/css/jquery.lightbox-0.5.css" media="screen" />
<script type="text/javascript">
    $(function() {
        $('#album1 a').lightBox();
        $('#album2 a').lightBox();
    });
</script>

そのため、ページが初めてロードされたとき、部門には何も入りません。しかし、ページはwhen I refresh正しいと思います。初めてではなく、再度更新したときにのみ表示されるのはなぜですか.どうすればこれを回避できますか

4

2 に答える 2

0

ロードしている画像は 214x160 よりもはるかに大きいと思われます。ブラウザは完全な画像 (大きなファイルである可能性があります) をダウンロードし、定義されたimgタグのサイズに圧縮します。

これを回避するには、イメージ エディターでイメージのサイズを 214x160 に変更するか、TimThumbやImageResize (by me!) などの動的リサイズ ツールを使用します。これはサーバー上にあり、要求に応じてイメージのサイズを変更します。

于 2013-10-08T18:59:44.603 に答える
0

  1. when the page is loaded for the first time nothing comes in the division.But when I refresh the page I get it correct.-- 初めての場合、写真が完全にダウンロードされていない可能性があります。

  2. 速度を上げるには、 の元の画像を使用しないで <img src="<?= $photo ?>" width="214" height="160" />ください。サムには 214x160px のサムを使用してください ;)

  3. ページの読み込み時間を改善するために、JavaScript をフッターに挿入してみてください。jquery が準備完了に設定されている場合、ページが開いたときに開始され、すべてのページ コンテンツがまだダウンロードされていない可能性があります。

アップデート

Yii を使用している場合は、署名ファイルではなく MVC を使用する必要があります。

于 2013-10-08T18:54:41.800 に答える