sjwilliams / laziestloader Goto Github PK

Hi @sjwilliams -- we (at @bizweekgraphics) have a fork of laziestloader without jQuery. Would you be interested to have a look? https://github.com/bizweekgraphics/slothy-loader/blob/master/slothy-loader.js

There are times the plugin could be more useful if it could replace two values, like a src for video and also the path to the video poster.

The {{size}} variable in the path of a responsive image doesn't play well with mustache templates. In a mustache template:

<img src="transparent.gif" data-pattern="path/name-{{size}}.jpg" data-widths="[320, 640]" />

becomes

<img src="transparent.gif" src="path/name-.jpg" data-pattern="path/name-.jpg" data-widths="[320, 640]" />

Maybe make the syntax configurable?

I'm imagining using this in the context of a slideshow, and it would be nice if there could be flag you could set to check for whether an element comes into the viewport from any direction, not just on vertical scroll.

Do you have a best practices suggestion for fading in the images upon lazy load?

When setSourceMode is false and a callback is being used for functionality, it would be handy to have access to the bestFit method.

And set interval as an option.

See: http://ejohn.org/blog/learning-from-twitter/

bestFit assumes widths are sorted from low to high, but nothing enforces that.

A simple sort like

widths.sort(function(a,b){
  return a - b;
});

probably won't work because of the slug/object version.

Currently, on resize, the plugin will check if there's a better sized image for an already-loaded one and use it, even if that image is smaller. Given that the browser will scale down larger images, it's probably best to prevent the http request overhead of new, smaller images when an acceptable larger image is already loaded.

Normally I use this plugin in responsive layouts were images or other lazy loaded elements have rules that make them block elements and inherit a width from their parent:

img.mylazyimage{
  display: block;  
  width: 100%;
}

Without some style rule or content to to give the element the correct size, the sizing logic will fail because laziestloader will miscalculate the target size.

Seems like the plugin should know this case and compensate.

One possible solution could be to checkout display type and temporarily give it the above rules, calculate the width, determine the best image size and then reset the element to its previous state.

This would work in many cases but would fail -- I believe -- if the element's parent also doesn't have a size (like it's position: absolute but without a width)

Ideas to fix this?

And make data-height-multipler an alias for data-ratio for a while

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.

Occasionally the plugin doesn't load visible elements on instantiation, but will after a 1px scroll.

Hello author,

Please fix some jquery deprecations

JQMIGRATE: jQuery.fn.resize() event
JQMIGRATE: jQuery.fn.scroll() event

Probably while considering our sans-jQuery fork, also to consider @3x support (which is also another one of the fork's features), per this: https://developer.apple.com/ios/human-interface-guidelines/overview/iphone-x/

iOS “Plus” devices and many high-end Android devices are also on a @3x pixel ratio.

once an image is load, reflect that state with a class. maybe something like '.lazy-loaded'