Делая скрипты на jQuery иногда требуется работать с изображениями после их полной загрузки, например, чтобы правильно вычислить размеры картинки.
С данной проблемой я столкнулся, когда делал .each() переборку картинок. Скрипт должен был найти каждую картинку, определить ее размеры и на их основании вписать в рамку.
Если я не использовал проверку – загрузилась ли картинка, то размеры определялись не правильно. Напомню, их можно определить так (в коде я сразу округляю значения в пикселях):
<script type=”text/javascript”>
$(document).ready(function(){
var img = $(‘.myimg’);
var bjconwidth = Math.round($(img).width());
var bjconheight = Math.round($(img).height());
alert(bjconwidth); alert(bjconheight);
});
</script>
<img class=”myimg” src=”564.jpg”>
Если вы запустите этот код, то размеры картинки 564.jpg будут определяться через раз. У меня, например 1 из 10 раз не срабатывает. Проблема в том, что картинка может не успеть прогрузиться, а скрипт будет уже запущен. Поэтому определение размеров не произойдет.
Исправим код, чтобы можно было проверить, прогузилась ли картинка и в зависимости от этого исполнить наш код:
<script type=”text/javascript”>
$(document).ready(function(){
var img = $(‘.myimg’);
$(img).on(‘load’, function(){
var bjconwidth = Math.round($(img).width());
var bjconheight = Math.round($(img).height());
alert(bjconwidth); alert(bjconheight);
});
});
</script>
<img class=”myimg” src=”564.jpg”>
Здесь мы используем событие $(img).on(‘load’, function(){ }); которое позволяет определить, загрузилась ли картинка и только после этого выполнить скрипт. Это решение подойдет в 90% случаях.
Если вы используете функции для определения загружена ли картинка, то скрипт нужно модернизировать. Дело в том, что картинка может запомниться в кэше (что и было у меня с Joomla) и грузиться сразу с него. В этом случае, картинка не будет скачиваться с сайта, а будет браться с кэша и событие load не сработает. Проверить это можно поочередно нажимая F5 и комбинацию (Ctrl + F5). Если появится 0, то у вас кэш.
Изменим скрипт так, чтобы мы могли определить откуда берется картинка с кэша или загружается с сайта:
<script type=”text/javascript”>
$(document).ready(function(){
//определяем, как загружена картинка
function imgsize(img, tip) {
var bjconwidth = Math.round($(img).width());
var bjconheight = Math.round($(img).height());
if(tip == ‘Кэш’) {alert(‘Кэш: ‘ + bjconwidth + ‘X’ + bjconheight);}
if(tip == ‘Загрузка’) {alert(‘Загружена: ‘ + bjconwidth + ‘X’ + bjconheight);}
}
$(‘.myimg’).each(function(){
//если картинка в кэше
if (this.complete || this.readyState === 4) { imgsize(this, ‘Кэш’); }
//если картинка загружается в первый раз
else { $(this).on(‘load’, function(){ imgsize(this, ‘Загрузка’); }); }
});
});
</script>
<img class=”myimg” src=”/images/565.jpg”>
Думаю, по комментариям все понятно. Этот код надо использовать только в том, случае, если размеры картинки у вас не определяются.
(Пока оценок нет)
Загрузка...