Can I put a timeout function inside a for loop?

[JacobPeters]

Yeah, I’m not seeing any performance problems like that, but then again, I don’t have most people’s computers. I love having a fast computer, but it makes it difficult to judge speed.

[nixnerd]

Found this page:

http://www.mennovanslooten.nl/blog/post/62

Going to try everything it recommends, as I think it might solve the problem.

I think it has something to do with closures?

[JacobPeters]

Well, the big problem is that Gaussian blur is something that should be done in parallel. CSS shaders can’t come soon enough.

So, I looked over the blur.js source. I would recommend using StackBlur which is what does the heavy lifting for blur.js. StackBlur

I got it working properly on a local dev server with this code

(function() {
    for(var i = 0, l = imgs.length; i < l; ++i) {
        (function(index) {
            var srcImg = document.createElement('img'),
                canvas = document.createElement('canvas'),
                container = document.querySelector('.backstrip');
            srcImg.setAttribute('src', imgs[index].getAttribute('src'));
            srcImg.setAttribute('id', 'backslideimg-b' + index.toString());
            canvas.setAttribute('id', 'backslide-b' + index.toString());

            container.appendChild(canvas);
            container.appendChild(srcImg);
            stackBlurImage('backslideimg-b' + index.toString(),
                           'backslide-b' + index.toString(),
                           25,
                           false );
            
            container.removeChild(container.lastChild);
            container.lastChild.removeAttribute('style');
            container.lastChild.setAttribute('class', 'backslide');
        }(i));
    }
}());

Another thing I noticed was that firefox transitions scale transforms in much higher quality. Chrome is faster but looks ugly.

[nixnerd]

I would recommend using StackBlur which is what does the heavy lifting for blur.js.

I was actually going to use StackBlur but didn’t want to use canvas for some reason.

Another thing I noticed was that firefox transitions scale transforms in much higher quality. Chrome is faster but looks ugly.

That’s pretty par for the course. I’m not really a fan of Chrome/Chromium. Tons of really choppy animations and scrolling. Not to mention I like Firefox dev tools better.

[JacobPeters]

I was actually going to use StackBlur but didn’t want to use canvas for some reason.

Well, you could use the canvasElement.toDataUrl() method to get the image for the div backgrounds. It would turn out exactly the same as blur.js that way. I’m not sure I see the downside to having canvas elements vs div’s, but I’d like to be enlightened if there is some drawback.

I’m not really a fan of Chrome/Chromium.

I knew I liked you for some reason. I’ve been using firefox since it was firebird and mozilla suite before that.

[nixnerd]

I knew I liked you for some reason. I’ve been using firefox since it was firebird and mozilla suite before that.

Amen. Started this thread months ago:

https://css-tricks.com/forums/topic/chrome-vs-firefox/

I’m not sure I see the downside to having canvas elements vs div’s, but I’d like to be enlightened if there is some drawback.

I had some reason for not using StackBlur… which has eluded me at the moment. I might need to look back into it.

[nixnerd]

BTW, scale and transforms look a lot better on Chromium once all the timeout functions are done.

[JacobPeters]

Btw, the remotely hosted image alert is always going to be a problem. Cross domain issues. The only workaround is to pull them from other domains through a proxy script on the server side using curl or whatever the equivalent is for backend language you’re using. At that point, you would be better off bluring on the server side and caching the result in a database.

[nixnerd]

Shit… would remote photos be an issue for stack blur?

I wish we could just use SVG filters but the performance is atrocious. Isn’t there a way we can optimize that? Why does it mess up transitions so bad?

[nixnerd]

Hey @JacobPeters, I remembered why I didn’t want to use canvas… I wasn’t sure how fluid images and canvas will work out. I suppose I could give it a shot because StackBlur is FAST AS HELL!!!

If I used StackBlur, I might be able to blur on click with no real performance penalty. What do you think of this idea?

[JacobPeters]

Why don’t you tie it to the load event for the images?

[JacobPeters]

I created a gist with my modifications to the script and the css. It’s stable at 60fps on my computer now.

https://gist.github.com/jacobcpeters/c03e03e8dc87932f7fb6

[nixnerd]

I created a gist with my modifications to the script and the css. It’s stable at 60fps on my computer now.

This is using StackBlur right?

[JacobPeters]

Yes it is.

I also removed the floats from the slides and backslides. Floats are worse performance-wise than anything else, plus it automatically sizes the width of the backstrip/strip div for however many images are in the slider.

Another thing I did was to generate a stylesheet in the javascript, so recalculating the styles would take less time on each slide change. The script now swaps classes rather than changing styles.

I’m thinking about making a Gaussian blur module to get some experience with the WebWorkers API. Portfolio stuff, and I need to have a bit more activity on my Github. All I have up there is a WordPress plugin I made.

[nixnerd]

I’m going to mess around with this and play a bit.

Would you mind if I ask you questions about it as they arise?

[Author]

Posts