laziestloader
laziestloader copied to clipboard
Slug-based widths are not sorted correctly
If laziestloader is given slug-based widths, it incorrectly assumes that they're presorted from smallest to largest. So an example like this will fail to pick the correct rendition:
<img data-pattern="https://graphics8.nytimes.com/images/53rd-place-nytimestravel-1-{{size}}.jpg" data-widths="[{"size":320,"slug":"square320"},{"size":75,"slug":"thumbStandard"},{"size":151,"slug":"moth"},{"size":190,"slug":"filmstrip"},{"size":190,"slug":"articleInline"},{"size":600,"slug":"articleLarge"},{"size":163,"slug":"hpSmall"},{"size":50,"slug":"blogSmallThumb"},{"size":151,"slug":"blogSmallInline"},{"size":480,"slug":"blog480"},{"size":533,"slug":"blog533"},{"size":427,"slug":"blog427"},{"size":362,"slug":"tmagSF"},{"size":592,"slug":"tmagArticle"},{"size":500,"slug":"slide"},{"size":750,"slug":"jumbo"},{"size":750,"slug":"superJumbo"},{"size":640,"slug":"square640"},{"size":150,"slug":"thumbLarge"},{"size":225,"slug":"blog225"},{"size":177,"slug":"mediumFlexible177"},{"size":675,"slug":"master675"},{"size":495,"slug":"master495"},{"size":180,"slug":"master180"},{"size":149,"slug":"mediumSquare149"},{"size":315,"slug":"master315"},{"size":168,"slug":"smallSquare168"},{"size":252,"slug":"smallSquare252"}]" src="https://cms-service.stg.nytimes.com/data/cms/files/2015/12/27/100000004055844/53rd-place-nytimestravel-1-smallSquare252.jpg">
On quick inspection of the source, the internal bestFit()
method does sort smallest to largest. The issue is likely here, where the slug/object-specific logic relates the best fit selection back to the original hash.
And double check int-based widths, too. @wmandrews reported that [720,320]
failed but [320, 720]
worked for him. Seems like this should be sorted on line 186...