Jquery - удаление изображения до того, как браузер клиента попытается загрузить его - PullRequest
2 голосов
/ 08 апреля 2010

Интересно, может ли кто-нибудь помочь мне с проблемой, с которой я столкнулся?

У меня есть несколько больших изображений, но из-за нехватки места я не могу создать несколько их копий разных размеров. Я использовал функции 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).

Я что-то не так делаю?

Ответы [ 2 ]

2 голосов
/ 08 апреля 2010

Я бы сделал следующее решение только для CSS:

Создайте класс CSS следующим образом:

preloader {
background: #efefef url(loader.gif) middle center no-repeat;
}

Тогда для ваших изображений просто сделайте это:

<img src="/big file" class="preloader" />

В результате должен получиться фон, который показывает загрузчик gif до точки загрузки изображения. Если это не работает (я не проверял это), тогда поместите IMG в div, в котором указан класс preloader, т.е.

0 голосов
/ 04 апреля 2012

Вы можете написать свое изображение внутри тега noscript, который имеет атрибуты данных, содержащие ваши параметры. Содержимое noscript не доступно через скрипт, но data-src и т. Д. Есть. Таким образом, у вас есть решение без js и элемент для целевого использования сценария.

Итак, найдите эти элементы noscript с помощью jquery и добавьте туда ротатор. Затем поменяйте местами ротатор при загрузке изображения.

<noscript data-src="example.jpg">
  <img src="example.jpg">
</noscript>
...