因此,我想做与HTML相同或相似的工作:
<picture>
<source type="image/webp" srcset="my-image.webp">
<img src="my-image.jpg">
</picture>
但是,显然这是行不通的:
<svg>
<picture>
<source type="image/webp" srcset="my-image.webp">
<img src="my-image.jpg">
</picture>
</svg>
我可以使用.htaccess方法,但由于302 HTTP重定向,我不希望这样做。
该解决方案还需要在没有任何JavaScript技巧的情况下工作...
由于罗伯特·朗森(Robert Longson)的意见,这就是我最终要做的事情:
<foreignObject x="0" y="0" width="100%" height="100%">
<picture>
<source width="1180" height="500" type="image/webp" class="lazyload" data-srcset="http://satyr.io/1180x500?2&type=webp&text=webp@1x&texture=graphpaper&delay=2g 1x,
http://satyr.io/2360x1000?type=webp&text=webp@2x&texture=graphpaper&delay=2g 2x"/>
<source width="1180" height="500" type="image/jpeg" class="lazyload" data-srcset="http://satyr.io/1180x500?2&type=jpg&text=jpg@1x&texture=graphpaper&delay=2g 1x,
http://satyr.io/2360x1000?type=jpeg&text=jpeg@2x&texture=graphpaper&delay=3g 2x"/>
<img width="1180" height="500" class="lazyload"
data-src="http://satyr.io/1180x500?2&type=jpeg&text=jpeg@1x&texture=graphpaper&delay=3g" alt=""/></picture>
</foreignObject>
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句