jQuery grayscale

[okunev2]

Использую на сайте данный скрипт https://github.com/josefrichter/jquery-grayscale

Картинки у меня jpg.

Проблема в том что при загрузке страницы, все равно "моргают" цветным фото, а иногда вообще не видно их. После втрой загрузки страницы более или менее работает. На медленно интернете вообще проблема.

Куда копать? Может есть другие решения? Спрайт из картинок не предлагать, это вариант не подходит.

Буду очень благодарен за пинок в нужном направлении.

[deadrash]

Сначала загружаются картинки, потом яваскрипт. Всё честно. Способов решения я вижу несколько:

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

2. Загружать картинки с помощью яваскрипта. Соответственно, вначале у вас картинки не будут отображаться, а после загрузки яваскрипта, отобразить их, опять же сделать плавное появление.

3. В стилях дать картинкам visibility: hidden; А уже яваскриптом менять на visible. (ну и опять же, делать плавное их появление) ИМХО даже эффектней будет.

[okunev2]

Сначала загружаются картинки, потом яваскрипт. Всё честно. Способов решения я вижу несколько: 1. После загрузки грейскал, менять картинку не сразу а плавно, что будет более эстетично смотреться. 2. Загружать картинки с помощью яваскрипта. Соответственно, вначале у вас картинки не будут отображаться, а после загрузки яваскрипта, отобразить их, опять же сделать плавное появление. 3. В стилях дать картинкам visibility: hidden; А уже яваскриптом менять на visible. (ну и опять же, делать плавное их появление) ИМХО даже эффектней будет.

Хоть один рабочий вариант увидеть в сети, пока все в теории, уже много перечитал и перелапатил.

[Zippovich]

ну 3-й на мой взгляд самый нормальный, не вижу проблем его написать с начальными знаниями css и js

[okunev2]

ну 3-й на мой взгляд самый нормальный, не вижу проблем его написать с начальными знаниями css и js

пример бы

[Zippovich]

css: img {visibility: hidden}

в файле grayscale.js - когда обработает фото сделать visibility: visible

[okunev2]

в файле grayscale.js - когда обработает фото сделать visibility: visible

Ну вот к примеру код: http://pastebin.com/Gi9r9EVF

И как в него включить код visibility: visible ?

[Zippovich]

я думаю что в 25-й строке и после 53-й

[Switch74]

единственный минус данного способа - при отключенном js картинки и не появятся + боты их могут не скушать

[okunev2]

я думаю что в 25-й строке и после 53-й

А что именно?

единственный минус данного способа - при отключенном js картинки и не появятся + боты их могут не скушать

Т.е. боты поисковых систем, котрые индексируют картинки?

[Switch74]

да

[Zippovich]

при отключеном js можно показывать оригинальные картинки, т.е. убрать правило visibility: hidden

А что именно?

$this.css('visibility', 'visible');

[Switch74]

при отключеном js можно показывать оригинальные картинки, т.е. убрать правило visibility: hidden

А что именно?

$this.css('visibility', 'visible');

если js отключен, то данный код не сработает, лучше

this.style='visibility:hidden;'

Edited April 9, 2013 by Switch74

[Zippovich]

если js отключен, то Ваш код тоже не сработает, поэтому лучше так как я написал - там есть уже готовый объект jQuery $this, а Ваш this в контексте не будет то что предполагается.

[Switch74]

у вас по умолчанию картинки скрыты через css, если js отключен, то у вас и не появятся картинки

я же предлагаю по умолчанию показывать картинки, а js их скрывать, но js должен быть не в отдельном файле а в самой верстке

this лишь указывает на объекты которые нужно скрыть, можно заменить чем угодно

так же могу предложить такой вариант:

document.write(<style>img{visibility:hidden;}</style>);

Исполнение другое - результат тот же

так же хочу заметить, что в вашем контексте тоже не понятно что за this

Edited April 9, 2013 by Switch74

[okunev2]

у вас по умолчанию картинки скрыты через css, если js отключен, то у вас и не появятся картинки

я же предлагаю по умолчанию показывать картинки, а js их скрывать, но js должен быть не в отдельном файле а в самой верстке

this лишь указывает на объекты которые нужно скрыть, можно заменить чем угодно

так же могу предложить такой вариант:

document.write(<style>img{visibility:hidden;}</style>);

Исполнение другое - результат тот же

так же хочу заметить, что в вашем контексте тоже не понятно что за this

это в теории, а рабочий пример в сети можно увидеть?

[Zippovich]

да все там понятно, я написал в какие строки это все вставить - в том контексте $this есть.

[Switch74]

Тогда я не понимаю чем вас не устроил мой this? Ибо var $this = $(this); из этого следует, что ваш равен моему.

[Zippovich]

мой this это $(this), а Ваш это просто this - это разные объекты и они естественно никак не могут быть равны, не зря же оборачивают в $.

и естественно Вы предлагали исполнять js, если js отключен, я на это среагировал.

если js отключен, то данный код не сработает, лучше this.style='visibility:hidden;'

ну и в том контексте, где я написал так же не сработает и Ваш вариант при отключеном js.

так же могу предложить такой вариант: document.write();

этот вариант я думаю неплох

Edited April 9, 2013 by Zippovich

[Switch74]

Простите, но думаю вы меня не правильно поняли:

css: img {visibility: hidden}

в файле grayscale.js - когда обработает фото сделать visibility: visible

в этом случае при отключенном js ваш скрипт не отработает и не сделает картинки видимыми, следовательно они будут скрыты.

я предлагал через js скрывать картинки

this.style='visibility:hidden;

и с вашим утверждением я полностью соглашусь

если js отключен, то Ваш код тоже не сработает, поэтому лучше так как я написал - там есть уже готовый объект jQuery $this, а Ваш this в контексте не будет то что предполагается.

но с одним но - если мой код не сработает, картинки останутся как есть и будут показываться

а так же хочу заметить, что this и $(this) - это одно и тоже а так как $this=$(this), то и this=$this

еще момент

при отключеном js можно показывать оригинальные картинки, т.е. убрать правило visibility: hidden

как вы собираетесь убрать его при отключенном js из css?

Простите, что запутался сам и вас запутал

Edited April 9, 2013 by Switch74

[Zippovich]

да, я не так понял что Ва написали, и все таки

если докапываться, то $(this) не равно this, $(this) - это функция, в которую передается this и возвращает он объект совсем не равный this.

на самом деле я бы не заморачивался с отключенным js

если посмотреть что ТС пытается сделать, то это делать нужно не на js, а на серверном уровне, это будет гораздо быстрее

[Switch74]

в качестве селектора передаете this в $(this) и он возвращает объект для jquery в котором и есть this по мне разницы ноль через что вы ссылаетесь на объект, т.к. обе ссылки указывают на один и тот же объект, просто вы работаете через jquery я же через чистый js, а чистый js считаю лучшим вариантом из-за того, что jquery отработает только после загрузки Edited April 9, 2013 by Switch74

[Zippovich]

я имел то что в $(this) есть много того что нет в this и сравнивать их некорректно, хотя $(this) содержит все что есть в this.

да я просто не понял ранешний Ваш пост - по-этому смысла обсуждать не вижу.