Mar 6 2017
I'd like to see the DOM state before image loading more semantically correct. Currently there's no hints in the DOM saying there would be an image appearing. Having a place-holding <img> would give out this intention better, even though the src and srcset are incorrect (temporarily). For most mobile-optimized sites, lazy image loading is implemented this way, and some sites add dummy data URI as src to be standard compliant like you suggested.
So let's use width. It's simpler.
I don't really use phones in landscape mode for web browsing, but from the comment, it seems it's desirable to keep the behavior the same for both portrait and landscape modes. The section folding is only done when the document is loaded, but not on device rotation. If we load the page in landscape mode, the section wouldn't be folded, and when changing to portrait, it would still not be folded, unlike if we load the document in portrait in the beginning.
We can still keep the <span> as the container for the loading indicator. It could be something like
<span><img data-src="..." ...></span>
before expansion, and
<span><img src="..." ...></span>
in the end.