我的图像库有下一个和上一个链接,当用户点击其中一个时,它会在#the_imagediv中加载一个图像,但我每次都需要调整图像大小。我的想法是,我会把调整图像大小的代码作为.load的回调函数。但这并不是每次都有效。同样奇怪的是,如果我在image = $('#the_image');
之后放一个alert("blah");
,那么图像每次都会正确定位。有什么想法吗?
这是我的JS:
<script type="text/javascript">
$(document).ready(function() {
$('#previous').live('click', function(e){
$('#img_wrapper').load( $(this).attr('href') + ' #container',function () {
var height = $(window).height();
var width = $(document).width();
var image = $('#the_image');
$("#the_image").css("max-height",height-200);
image.css({
'max-height': height-200,
'left': width/2 - (image.width() /2)-5,
'top': height/2 -(image.height() /2),
});
prev = $('#previous'); next = $('#next');
prev.css({
'left': 0,
'top': (height/2)-150,
});
next.css({
'left': 924,
'top': (height/2)-150,
});
});
e.preventDefault();
});
});
</script>
这就是工作原理。多亏了Jasper,他不得不修改一下自己的代码:
$(function() {
$(document).delegate('#next', 'click', function (e) {
$('#img_wrapper').load( $(this).attr('href') + ' #container',function () {
var height = $(window).height(),
width = $(document).width();
$("#the_image").bind('load', function() {
var image = $('#the_image');
$("#the_image").css("max-height",height-200);
image.css({
'max-height': height-200,
'left': width/2 - (image.width() /2)-5,
'top': height/2 -(image.height() /2),
});
});
$('#previous').css({
'left' : 0,
'top' : ((height / 2) - 150),
});
$('#next').css({
'left' : 924,
'top' : ((height / 2) - 150),
});
});
e.preventDefault();
});
});
在获取图像的宽度/高度之前,必须先加载图像。
$(function() {
$(document).delegate('#previous', 'click', function (e) {
$('#img_wrapper').load( $(this).attr('href') + ' #container',function () {
var height = $(window).height(),
width = $(document).width();
//here's the fix, we wait for the image to load before changing it's dimensions
$("#the_image").bind('load', function (
$(this).css({
'max-height' : (height - 200),
'left' : (width / 2 - ($(this).width() / 2) - 5),
'top' : (height / 2 - ($(this).height() / 2)),
});
});
$('#previous').css({
'left' : 0,
'top' : ((height / 2) - 150),
});
$('#next').css({
'left' : 924,
'top' : ((height / 2) - 150),
});
});
e.preventDefault();
});
});
或者,我会使用一个不同的AJAX函数,这样您就可以在图像添加到DOM之前将load
事件处理程序添加到图像中(以确保您可以在load
事件触发之前捕获它):
$(function() {
$(document).delegate('#previous', 'click', function (e) {
$.get($(this).attr('href'), function (serverResponse) {
var height = $(window).height(),
width = $(document).width();
//here's the fix, we wait for the image to load before changing it's dimensions
serverResponse = $(serverResponse).find('#container');
serverResponse.find('#the_image').bind('load', function (
$(this).css({
'max-height' : (height - 200),
'left' : (width / 2 - ($(this).width() / 2) - 5),
'top' : (height / 2 - ($(this).height() / 2)),
});
});
//add the new HTML to the DOM, `.load()` did this automatically
$('#img_wrapper').html(serverResponse);
$('#previous').css({
'left' : 0,
'top' : ((height / 2) - 150),
});
$('#next').css({
'left' : 924,
'top' : ((height / 2) - 150),
});
});
e.preventDefault();
});
});
试试这个,记住高度和宽度是属性而不是方法:此外,不要将对象存储到变量中,除非您要做的工作比每次事件触发只进行一次点链接还要多。哦,我也忘了。。。+"px"将真正帮助IE!
<script type="text/javascript">
$(document).ready(function() {
$('body #main #wrapper').on('click', '#previous' function(e){
$('#img_wrapper').find("img").attr("src", $(this).attr('href') + ' #container');
var height = $(window).height(), width = $(document).width();
$('#the_image').css({
'max-height': parseInt((height-200), 10)+"px",
'left': parseInt((width/2 - (image.width /2)-5), 10)+"px",
'top': parseInt((height/2 -(image.height /2)), 10)+"px",
});
$('#previous')css({
'left': 0,
'top': parseInt( ((height/2)-150), 10)+"px",
});
$('#next'.css({
'left': 924+"px",
'top': parseInt( ((height/2)-150), 10)+"px",
});
});
e.preventDefault();
});
});
</script>