search

uidaholib / collectionbuilder-cdm-template

template used to build digital collection sites at University of Idaho Library
https://www.lib.uidaho.edu/digital/
MIT License
3 stars 8 forks source link

svg placeholder for lazyload #79

Closed evanwill closed 4 years ago

evanwill commented 4 years ago

@mshannon95 noticed issues with reflow not happening on Chrome when images lazyload on an about page item-figure include (works in Firefox, and may have worked fine until recently in Chrome). This suggests need to add placeholder images (which we tried in past, but didn't love). This CCS-Tricks article suggested an inline svg option--that seems to work really well!

Add: src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 3 2'%3E%3C/svg%3E" to images with data-src which are going to be lazy loaded.

I need to test on huge collections, but probably add to:

var placeholder = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 3 2'%3E%3C/svg%3E"

evanwill commented 4 years ago

this is done here, 32ef99ba56b9ed1e5294cd41dc2e145b5960bf5f

and makes timeline way better!