Localize repaints

[phloe]

Instead of injecting a blank placeholder img which in turn is replaced with an actual image - you could use the Fluid Video technique on the element containing the image (maybe keep the .delayed-image-load-div?):

.delayed-image-load {
    position: relative;
}
.delayed-image-load:after {
    display: block;
    content: " ";
    width: 100%;
    padding-bottom: 56.25%;
}
.delayed-image-load > img {
    position: absolute;
}

Position absolute moves elements out of flow and so only needs to repaint the actual area it covers - instead of the entire parent block (or worse) :)

[Integralist]

Hey @rasmusfl0e thanks for the info! If I get some time over the next week I'll have a play around with this technique :-)

[addyosmani]

@Integralist that raises a good point I hadn't considered before - has the BBC spent much time looking at the repaint cost of the image enhancer technique? i.e for increasingly large images do we see jank/slowness in the page on image injection/painting?

[Integralist]

@addyosmani no research as yet but I agree that we definitely need to spend some time reviewing this.

If you get a chance to crack open the chrome dev tools and have a peeky then that would be cool ;-)

[thom4parisot]

@addyosmani is there a programatic way to detect repaints with PhantomJS for example? Repaint/reflow could become a metric of success/failure/coverage of tests then.

[Integralist]

@oncletom @addyosmani doesn't appear so :-( https://github.com/ariya/phantomjs/issues/10641