Javascript 如何避免Jquery函数加载缓慢

我不熟悉PHP和Jquery。有一个分区使用Jquery在lightbox中显示图像。但是，我不知道为什么图像加载缓慢。
代码如下：

<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>

以下是lightbox脚本：

<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>  

当第一次加载页面时，分区中没有任何内容。但是当我刷新页面时，我发现它是正确的。
--第一次可能是您的照片没有完全下载

要提高速度，请不要使用
“width=“214”height=“160”/>
中的原始图片。使用214x160px拇指作为拇指；）

尝试将javascript放在页脚中以缩短页面加载时间。若您的jquery设置为就绪，那个么它将在页面打开时启动，可能还并没有下载所有页面内容

更新

如果你使用Yii，你就完全不用MVC not signle file。
我希望你加载的图像比214x160大得多-浏览器正在下载完整图像（可能是一个大文件），然后将其压缩到
img
标记的定义大小

要解决此问题，请在图像编辑器中将图像大小调整为214x160，或使用动态大小调整器，如或（由我！），它位于您的服务器上，并根据请求调整图像大小。
有人请指导我如何将javascript放入页脚以缩短页面加载时间。

-这是什么意思。我应该将此脚本放在哪里？没有相同，没有任何更改。我想，好的做法是将所有javascript代码放在页脚中，然后再添加标记。您是否更改了起始位置所有图片到拇指大小？在代码中，我已经将其大小调整为214*600。那么我应该更改什么…请在代码中引导我，但您不需要像2000px1400px（2mb）这样的原始图片来显示litle width=“214”height=“160”拇指。（10-60kb）我想这是一个普遍的问题。我已经调整了标签中图像的大小。但是仍然不起作用。你能给我一些建议吗