Почему не отрабатывает событие load при обновлении страницы в браузере?

Question

[Сергей]

Есть скрипт

jQuery( document ).ready(function($) {
    $('.dg-sel-fac').hide();
    if( $('div').is('#dg-content')) {
		$('#for-crop').load(function(){
                     startCrop(size_ratio);
                      sizeOnS();
		});
    }
})

Суть скрипта - после загрузки картинки срабатывает событие load и в нем я вызываю функции обработки этой картинки.
Все хорошо работает при загрузке страницы. Но когда из браузера делается обновление страницы (f5) это событие не срабатывает. Что можно сделать ? Или использовать другое событие.

Comments

[ⓒⓢⓢ]

Почему не отрабатывает событие load при обновлении страницы в броузере?

На вскидку...
при обновлении страницы через F5 происходит что-то такое:
1. Браузер берёт из кеша всё что может, включая документ и картинку
2. т.к. картинка уже есть, то вызываются все объявленные обработчики load
3. Но наш "load" обработчик не выполниться, потому что он ещё не объявлен. Ещё не отработали обработчики "ready" , в котором собственно мы и объявляем наш "load"
Обработчики ready вызываются когда документ построен, load - когда загружен

Answer 1

[Shyngys Sailaubai]

Возможно дело в кэше браузера.

Comments

[Сергей]

И как это можно победить ?

[Shyngys Sailaubai]

Можете код js и html подробнее написать. Что и откуда

[Сергей]

Shyngys Sailaubai, Основной код скрипта я написал в начале. Дальше в скрипте идут функции .

jQuery( document ).ready(function($) {
    $('.dg-sel-fac').hide();
    if( $('div').is('#dg-content')) {
    $('#for-crop').load(function(){
                     startCrop(size_ratio);
                      sizeOnS();
    });
    }
    function startCrop(noAS){
        jcrop_api = $.Jcrop('#for-crop');
		console.log('x1='+$('#x1').val());
		console.log('x2='+$('#x2').val());
		console.log('root_width='+root_width);
		console.log('root_height='+root_height);
        jcrop_api.setOptions({setSelect:   [ $('#x1').val(), $('#y1').val(), root_width, root_height ]});

        jcrop_api.setOptions({
            onChange: showCoords,
            onSelect: showCoords,
            bgColor:     'black',
            bgOpacity:   .4,
            allowSelect:false
        });
    }
});

Html код для которого вызывается скрипт такой

<div class="dg-crop-step1">
                                    <img id="for-crop" alt="" src="<?= $img[0] ?>">
                                </div>

Все это крутится на Wordpress

[Shyngys Sailaubai]

Сергей, оберните деиствия связанные с загрузкой в
$(window).load(function () {
//Ваш код
});

[Сергей]

Shyngys Sailaubai, а $(window).load вызывается когда страница полностью загружена с картинками ?
Мне нужно вызвать функцию startCrop после загрузки картинки.