If you avoid reflows and use requestAnimationFrame, I don’t think DOM manipulations should be a big problem. The biggest problem I see is image decoding, but even with two simple img tags, you can clearly see that the problem exists.
Load it twice : the animated gif is cacheable, not the landscape photo.
On the second loading, set CPU: 20x slowdown. You can see that the problem is decoding.
Now load this page again in Fast 3G: the browser is decoding while the file is downloading. Smaller chunks to decode, no obvious freeze.
But if you change the src of the img tag, Chrome is decoding the image while it’s downloading, and you end up having the same behavior that the one you had with two simple img tags (try with 20x slowdown, Fast 3G):.
Note that the second technic is the worst for now, but it could become the best soon (except that you won’t see the progressive loading):
Last but not least: here’s my example of prioritized loadings with a limit of 6 parallel requests, with 600 pictures (1000x1000px resized to 100x100px).
Just the 600 pics in simple img tags without priority:
I can’t spot any difference between the two on my LG G3 (very slow redraws on scrolling in both cases) and my iPhone SE (smooth slow scrolling, noticeable redraws on fast scrolling). Except for the loading order, of course.