как использовать это ключевое слово в другом обработчике событий

Question

Я показываю изображение профиля. если это изображение больше определенного размера, я хочу масштабировать его, поэтому я присоединяю событие загрузки к этому изображению. после загрузки изображения я проверю, больше ли оно, и если да, то масштабирую его до меньшего изображения. Я показываю анимацию загрузки, пока изображение не загрузится.

<td height="203" valign="middle" align="center"><div id="loadingdiv">Loading...
</div><img style="display:none;" id="proimg" src="<?=$path?>" />
</td>

<script type="text/javascript">

var pro = document.getElementById('proimg');
pro.onload = function()
{
    if(this.width>260)this.style.width = '260px';
    if(this.height>200)this.style.height = '200px';
    window.setTimeout(function() {
        document.getElementById('loadingdiv').style.display = 'none';
        this.style.display = 'inline';

    },1000);
}

</script>

Анимация загрузки исчезнет, ​​и изображение станет видимым через секунду. это то, что я хочу, поэтому я сделал это, как указано выше. но как передать это onload в обработчик события settimeout?

Без установленного времени он работает нормально, и я могу пойти с этим, но я просто хочу показать задержку.

EDIT:

Я использую, чтобы сделать как первый ответ. Но я думал, что должен быть другой способ или концепция сделать это.

Есть ли что-нибудь, что я могу сделать с замыканиями здесь? ТАК ЧТО Я НЕ ДОЛЖЕН ИСПОЛЬЗОВАТЬ ДОПОЛНИТЕЛЬНЫЕ ПЕРЕМЕННЫЕ ССЫЛКИ.

Answer 1

Вы не можете использовать клавиатуру this внутри анонимной функции дескриптора события, но вы все равно можете сделать ссылку на текущий this, а затем использовать эту ссылку для вызова методов / свойств объекта. Вот пример:

var that = this;
window.setTimeout(function() {
    that.style.display = 'inline';
}, 1000);