Question

我有一个非常简单的图库，其中一次显示一个大图像。我在主图像的右边有一个很大的标题，我试图靠近图像本身。当主图像是水平的时，标题位于最右侧。当主图像垂直时，标题距其DIV右侧约30px。

单击缩略图时，将创建并加载新图像。我试图然后更改主图像的源属性，获取其尺寸，并相应地定位标题。但是当我点击另一个尺寸的图像时，它似乎只显示前一个图像的尺寸。如果我再次点击相同的图像，它就会起作用。

这是jQuery -

$("#apparatus_thumbs a").click(function() {
            var src = $(this).attr("href");
            var caption = $(this).attr("title");
            var wrap = $("#apparatusPhoto").fadeTo("medium", 0.5);
            var img = new Image();
            $(img).load(function() {
                wrap.fadeTo('fast', 1);
                $("#apparatusPhoto").attr('src', src);
                var height = $("#apparatusPhoto").height();
                var width = $("#apparatusPhoto").width();
                if (height > width) {
                    $("#apparatusPhotoCaption").css('right', '150px');
                } else {
                    $("#apparatusPhotoCaption").css('right', '0px');
                }
                if (caption != '') {
                $("#apparatusPhotoCaption").html(caption);
                $("#apparatusPhotoCaption").fadeIn('slow');
                } else {
                    $("#apparatusPhotoCaption").fadeOut('slow');
                }
                console.log('image loaded');
            }).attr('src', src);
            return false;
        });

有什么想法吗？

更新这似乎有效。删除图像然后添加新图像，似乎给出了期望的结果。

$("#apparatus_thumbs a").click(function() {
            var src = $(this).attr("href");
            var caption = $(this).attr("title");
            var wrap = $("#apparatusPhoto").fadeTo("medium", 0.5);
            var img = new Image();
            $(img).load(function() {
                wrap.fadeTo('fast', 1);
                $("#apparatusPhoto").find('img').remove();
                $("#apparatusPhoto").append(img);
                var height = $("#apparatusPhoto img").height();
                var width = $("#apparatusPhoto img").width();
                if (height > width) {
                    $("#apparatusPhotoCaption").css('right', '150px');
                } else {
                    $("#apparatusPhotoCaption").css('right', '0px');
                }
                if (caption != '') {
                $("#apparatusPhotoCaption").html(caption);
                $("#apparatusPhotoCaption").fadeIn('slow');
                } else {
                    $("#apparatusPhotoCaption").fadeOut('slow');
                }
                console.log('image loaded');
            }).attr('src', src);
            return false;
        });

Answer 1

当您将图像.load()从已加载的值更改为其他内容时，我不确定.src是否会在所有浏览器中可靠地触发。

我以前遇到过这个问题，不得不创建一个新的图像对象，将新的URL加载到该对象中，对该新对象使用load事件，然后用新的对象替换旧的图像对象。

获取图像更改源属性jQuery的高度和宽度

1 个答案: