嗨，我正在尝试制作 Google+ 风格的相册。我相当成功。但奇怪的事实是，代码在 Chrome 中运行缓慢，但在 Firefox 中运行良好。在 Chrome 中，图片加载速度很慢，相册图像（jquery 部分）的旋转速度很慢。这是我的代码...
<?php
$number_of_image_per_album=array();
$query="SELECT album_id,album_name from albums WHERE user_id='18'";//user id
$result=mysql_query($query);
$num_of_album=mysql_num_rows($result);
for($i=1,$k=0;$k<=800,$i<=$num_of_album;$k=$k+300,$i++)
{
$array=mysql_fetch_assoc($result);
$album_id=$array['album_id'];
$album_name=$array['album_name'];
$query2="SELECT image_id,ext from images WHERE album_id='$album_id'";
$result2=mysql_query($query2);
$num_of_images=mysql_num_rows($result2);
$num_of_image_per_album[]=$num_of_images;
echo "<div class='image_stack' style='margin-left:",$k,"px'>";//create a album of images
$left=108;
$top=8;
for($j=1;$j<=$num_of_images;$j++)
{
$array2=mysql_fetch_assoc($result2);
$image_id=$array2['image_id'];
$image_ext=$array2['ext'];
$image_name=$array2['image_name'];
//$str="<img id='photo.$j' class='stackphotos' src='uploads/.$album_id./.$image_id.$image_ext' />";
echo "<img id='photo$j' class='stackphotos' style='left: $left; top:$top ;' src='uploads/$album_id/$image_id.$image_ext' />";
$left=108-4;
$top=8-2;
}
echo "</div>";
}
?>
这是我的 jquery 部分...
<script>
$(document).ready(function() {
$('.image_stack').delegate('img', 'mouseenter', function() {//when user hover mouse on image with div id=stackphotos
//if ($(this).hasClass('stackphotos')) {//
// the class stackphotos is not really defined in css , it is only assigned to each images in the photo stack to trigger the mouseover effect on these photos only
var parent = $(this).parent();
var index=parent.index()-1;
var num_of_image_per_album=<?php echo json_encode($num_of_image_per_album);?>;
var num_of_image_for_specific_album=num_of_image_per_album[index];
// alert( num_of_image_for_specific_album);
var i=0;
var degree=0;
for(i=1;i<=num_of_image_for_specific_album;i++)
{
parent.find('img#photo'+i).css({'-webkit-transform': 'rotate(' + degree + 'deg)'});
parent.find('img#photo'+i).css({ '-moz-transform': 'rotate(' + degree + 'deg)'});
degree=degree+10
}
})
.delegate('img', 'mouseleave', function() {// when user removes cursor from the image stack
var parent = $(this).parent();
var index=parent.index()-1;
var num_of_image_per_album=<?php echo json_encode($num_of_image_per_album);?>;
var num_of_image_for_specific_album=num_of_image_per_album[index];
for(i=1;i<=num_of_image_for_specific_album;i++)
{
parent.find('img#photo'+i).css( {'-webkit-transform':''});
parent.find('img#photo'+i).css({ '-moz-transform': ''});
}
});;
});
</script>
我正在使用 16.0.912.77 版本的 Crome。这在 safari 中也很慢。这是什么问题。请告诉我。提前谢谢......