Question

使用jQuery，我点击

更改图像的src

$("#thumb li img").click(function() {
var newlinkimage = $(this).attr("src");

newlinkimage = newlinkimage.substring(14,17);

    $("#avant img").attr("src", 'retouche-hr' + newlinkimage + '-a.jpg');
    $("#apres img").attr("src", 'retouche-hr' +newlinkimage + '-b.jpg');

问题是，新图像宽度与旧图像宽度不同。我如何获得新图像的NATIVE宽度（如在Dreamweaver中获得该图像的小箭头

Answer 1

这是一种简单的javascript方式。将它集成到您的代码中应该很容易。

var newimage = new Image();
newimage.src = 'retouche-hr' + newlinkimage + '-a.jpg'; // path to image
var width = newimage.width;
var height = newimage.height;

Answer 2

旧图像是否设置了宽度和高度？如果你使用$（image）.width（“”）它应该将宽度重置回你应用任何宽度变化之前的宽度（类似于高度）。我认为这不适用于通过CSS或属性设置宽度的图像。重置为旧宽度后，可以使用.outerWidth（）来获取图像的宽度。

Answer 3

您希望在更改图像之前获得图像的实际宽度，然后将新图片设置为该宽度。你可以用$（img）。load：

来做到这一点

var pic_real_width;
var pic_real_height;

$(img).load(function() {
    // need to remove these in of case img-element has set width and height
    $(this).removeAttr("width")
           .removeAttr("height");

    pic_real_width = this.width;
    pic_real_height = this.height;
});

$("#thumb li img").click(function() {
var newlinkimage = $(this).attr("src");

newlinkimage = newlinkimage.substring(14,17);

        $("#avant img").attr("src", 'retouche-hr' + newlinkimage + '-a.jpg').width(pic_real_width);
        $("#apres img").attr("src", 'retouche-hr' +newlinkimage + '-b.jpg').width(pic_real_width);

Answer 4

此代码始终返回零'0'

    var newimage = new Image();
    newimage.src = 'retouche-hr' + newlinkimage.substring(14,17) + '-a.jpg'; 
    var width = newimage.naturalWidth;
    var height = newimage.naturalHeight;
    alert (width);

为什么???

jquery中的图像原始宽度

4 个答案: