jQuery의 이미지 기본 너비

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');

문제는 새로운 이미지 너비가 오래된 것과 다르다는 것입니다. 새로운 이미지의 기본 너비를 어떻게 얻습니까 (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 '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);

왜 ???