Как усовершенствовать скрипт, который создает эффект мозайки, проявляя части картинки?

Question

[smartkrio]

Недавно я задавал вопрос как сделать маску с сеткой дивов на картинке. Через пару часов попыток у самого получилось. Вот такого результата я смог добиться: jsfiddle.net/Ld9jy/44 Xотелось бы узнать как можно усовершенствовать данную реализацию, так как моя сильно нагружает лендинг.

Comments

[smartkrio]

Друзья, спасибо что натолкнули на решение. Сам прикинул что виснуть намертво не должно, значит где то зацикливается. Получилось что такая же функция setInterval() каждые 300 миллисекунд отслеживает состояние элементов, и внутри нее запускался мой скрипт который каждые 5 миллисекунд пробегал по дивам. Реши проблему остановкой таймера когда все дивы погаснут.

var i=0, timerId;

    timerId = setInterval(function() {
        $("#no_"+list[i]).fadeOut( 100 );
        if(i==540){
            clearTimeout(timerId);
        }
        i++;
    }, 0.5);

Answer 1

[Сергей Соколов]

В чём выражается избыточная нагруженность страницы? У меня ваш пример замечательно работает.

Идеи:
1. реализовать такое же на canvas. Копировать пиксели из картинки в canvas. Не знаю, будет ли выигрышь в производительности;
2. обратный процесс: показать картинку, закрытую маской из белых div'ов, и потом их удалять в случайном порядке, раскрывая единственную картинку;
3. показать поверх картинки анимированный гиф с исчезающей маской, проигрываемый единственный раз : )

Answer 2

[Юрий Лобанов]

Подтверждаю, у меня Ваш вариант работает очень быстро, без тормозов и так далее.

Answer 3

[Graph]

Ну только вместо clearTimeout - clearInterval поставить.

Comments

[smartkrio]

Да, спасибо за подсказку!