我是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
页面,我得到它是正确的。为什么会这样。为什么它仅在再次刷新时才出现,而不是第一次出现。我怎样才能避免这种情况
我希望您加载的图像远大于 214x160 - 浏览器正在下载完整图像(可能是一个大文件(,然后将其压缩到定义大小的 img
标签中。
要解决此问题,请在图像编辑器中将图像大小调整为 214x160,或使用动态调整器,例如 TimThumb 或 ImageResize(由我!(,它位于您的服务器上并根据请求调整图像大小。
-
when the page is loaded for the first time nothing comes in the division.But when I refresh the page I get it correct.
-- 第一次也许你的照片没有完全下载。 -
为了提高速度,请勿使用
<img src="<?= $photo ?>" width="214" height="160" />
的原始图片。使用 214x160 像素的拇指作为拇指;) -
尝试将javascript放在页脚中以改善页面加载时间。如果您的 jquery 设置为就绪,那么它会在页面打开时启动,并且可能所有页面内容尚未下载。
更新
如果你使用 Yii,你真的会使用 MVC 而不是 signle 文件。