Я просто нахожу интересную вещь: когда вы изменяете src элемента, у него будет задержка в несколько секунд, и строка под ним будет выполняться до отображения нового изображения, поэтому он загрузит размер последнего изображения (высоту ширины), если выхотите получить размер сразу после изменения источника изображения.
вот свидетельство:
$("button").click(functon() { //set a button so you can handle the process.</p>
<pre><code>var alert1 = $("#image").width(); //#image is an <img> element, don't set width and height.
var src = pictures.pop(); //pictures is an array which stored image base64 code.
$("#image").attr("src", src);
var alert2 = $("#image").width();
alert("alert1: " + alert1 + " alert2: " + alert2);
}
в качестве кодапоказывает, что после выполнения alert1 должен показывать ширину картинки до изменения src, alert2 должен показывать ширину картинки после изменения src.
но что я на самом деле вижу?и alert1, и alert2 показывают ширину картинки перед изменением.
Чтобы укрепить мое мнение, есть еще один опыт:
$("button").click(functon() { //set a button so you can handle the process.</p>
<pre><code>var alert1 = $("#image").width(); //#image is an <img> element, don't set width and height.
var src = pictures.pop(); //pictures is an array which stored image base64 code.
$("#image").attr("src", src);
alert("wait");
var alert2 = $("#image").width();
alert("alert1: " + alert1 + " alert2: " + alert2);
}
видите?я добавляю окно предупреждения после src изменения, чтобы я мог контролировать код, который будет выполняться после src изменения, а затем, что случилось, alert1 возвращает ширину изображения до src изменения, а alert2 возвращает ширину изображения после src изменения!поэтому доказано, что процесс src выполняется после кода после его выполнения.
Что я хочу знать, так это почему, что произошло, когда src изменит картинку Chrome?
ps: Iпросто попробуйте это на chrome, если вы заинтересованы в этом, можете сделать то же самое exp на другом браузере.