Интересно, может ли кто-нибудь помочь мне с проблемой, с которой я столкнулся?
У меня есть несколько больших изображений, но из-за нехватки места я не могу создать несколько их копий разных размеров. Я использовал функции PHP GD, чтобы изменить размеры изображений до нужных размеров и вывести их в браузер. Это работает, но, очевидно, занимает некоторое время обработки, что, следовательно, влияет на время загрузки страниц. Я в порядке с этим, но я хочу показать изображение только после того, как оно полностью загружено, и иметь загрузочный GIF на его месте до этого времени. Я использую jquery для этого.
Проблема, с которой я сталкиваюсь, заключается в том, чтобы сделать страницу функциональной независимо от того, включен ли на клиенте JavaScript или нет. Если JS не включен, я хочу выводить стандартные теги img, в противном случае изображения удаляются и заменяются загрузочным gif до тех пор, пока они не будут полностью загружены. Ссылка ниже показывает простой не-javascript недружественный пример того, что я хочу сделать (попробуйте отключить JS):
http://jqueryfordesigners.com/demo/image-load-demo.php
Я тестировал основы, используя код ниже. Функция attr () будет заменена чем-то вроде remove (). Это всего лишь тест, чтобы что-то произошло с изображением до того, как браузер попытается его загрузить.
$(document).ready(function() {
$( "#Thumbnails .thumbnail img" ).attr('src', '#');
});
В IE это работает правильно - источник изображения заменяется на «#» ДО того, как браузер клиента получит возможность начать загрузку изображения. В Firefox, однако, он загружает изображение, а затем меняет источник. Мне кажется, что Firefox загружает событие jquery onready позже, чем должно. Насколько я знаю, это должно быть выполнено до стандартного события onload и до того, как что-либо начнет загружаться. Если это помогает, я тестирую его с большим количеством изображений на экране (81).
Я что-то не так делаю?