[{"data":1,"prerenderedAt":167},["ShallowReactive",2],{"project-21827328":3},{"id":4,"name":5,"line":6,"line_source":7,"title":8,"url":9,"domain":10,"maker":11,"posted_at":12,"year":13,"points":14,"comments":15,"rank_in_year":16,"shown_in_year":17,"top":18,"tier":19,"category":20,"subcategory":21,"format":22,"keywords":23,"reception":28,"sentiment":29,"stance_mix":30,"scored_comments":34,"aspects":35,"strip":39,"post_text":29,"what":41,"said":63,"maker_in_thread":101,"shape":110,"grid":113,"attempts":131,"same_week":132,"maker_shows":159,"maker_hidden":160,"reader_version":161,"card":162},"21827328","lazy-simon.js","The smallest and most narcissistic image lazyloading JavaScript library","title","Show HN: The smallest and most narcissistic image lazyloading JavaScript library","https:\u002F\u002Flazy.simon-frey.eu\u002F","lazy.simon-frey.eu","l1am0",1576691294,2019,10,9,1798,2195,82,"shown","languages","javascript library","library",[24,25,26,27],"lazy loading","javascript","intersection observer","image lazy load","quiet",null,{"positive":31,"neutral":32,"mixed":33,"critical":33},1,3,0,4,{"execution":36,"performance":37,"idea":38},{"positive":33,"critical":33},{"positive":33,"critical":33},{"positive":31,"critical":33},[33,32,33,32,33,33,32,33,40],5,{"problem":42,"audience":29,"pricing":29,"motivation":49,"time_to_build":29,"stack":53,"openness":62,"stage":62,"team_size":62},{"value":43,"source":44,"evidence":45},"Heavy lazy-loading libraries are too big for simple image lazy loading","maker",[46],{"id":47,"by":11,"text":48},"21827344","IMO lazy loading the images on your websites is a good idea in 99% of the cases. As all the other lazy load libraries where way to heavy for use case I build lazy-simon.js. It is…",{"value":50,"source":44,"evidence":51},"Existing lazy load libraries were too heavy for the maker's use case",[52],{"id":47,"by":11,"text":48},[54,58],{"value":55,"source":44,"evidence":56},"JavaScript",[57],{"id":47,"by":11,"text":48},{"value":59,"source":44,"evidence":60},"Intersection Observer API",[61],{"id":47,"by":11,"text":48},"unknown",{"praise":64,"objections":73,"requests":74,"questions":89,"alternatives":96},[65],{"value":66,"source":67,"evidence":68},"Tiny size and simplicity appreciated","commenter",[69],{"id":70,"by":71,"text":72},"21840034","adawg_4","This is beautiful tbh, will use in projects.",[],[75,82],{"value":76,"source":67,"evidence":77},"Use native loading=\"lazy\" when the browser supports it",[78],{"id":79,"by":80,"text":81},"21834531","alexza","Some browsers like chrome support this functionality natively by setting the image attribute loading=\"lazy\" (https:\u002F\u002Fweb.dev\u002Fnative-lazy-loading\u002F) You could improve your library…",{"value":83,"source":67,"evidence":84},"Smaller size via SVG placeholder and avoiding dataset calls",[85],{"id":86,"by":87,"text":88},"21829743","phillipseamore","Use svg instead of that PNG and dataset not set\u002Fgetattribute and you are down to 400",[90],{"value":91,"source":44,"evidence":92},"Why an SVG placeholder changes image size on lazy load",[93],{"id":94,"by":11,"text":95},"21830228","When I use the svg in the img src, the image is higher as the original and thereby the size changes on lazy loading. Do you have a clue why? Used svg:…",[97],{"value":98,"source":67,"evidence":99},"Native browser loading=\"lazy\" attribute",[100],{"id":79,"by":80,"text":81},{"comments":40,"answered":33,"key":102},[103,104,107],{"id":47,"text":48},{"id":105,"text":106},"21835573","Thanks for that note! The check is added and the script uses the native lazy load if supported :D",{"id":108,"text":109},"21829968","Awesome. Thanks!",{"commenters":34,"max_depth":34,"maker_replies":40,"first_comment_mins":111,"lifespan_hours":112},2,29,[114,116,118,120,122,124,125,127,129],[47,33,33,115,11,31],"maker\u002Fneutral\u002Fidea",[79,31,32,117,80,33],"project\u002Fneutral\u002Fexecution",[105,31,33,119,11,31],"maker\u002Fneutral\u002Fexecution",[86,111,32,121,87,33],"project\u002Fneutral\u002Fperformance",[108,111,33,123,11,31],"maker\u002Fpositive\u002Fexecution",[94,111,33,119,11,31],[126,111,32,119,87,33],"21832432",[128,111,33,123,11,31],"21835565",[70,32,40,130,71,33],"project\u002Fpositive\u002Fidea",[],[133,138,142,146,150,155],{"id":134,"name":135,"points":136,"category":137},"21795159","Krabby",179,"dev_tools",{"id":139,"name":140,"points":141,"category":20},"21796753","Coerce",155,{"id":143,"name":144,"points":145,"category":137},"21794566","Clayoven",149,{"id":147,"name":148,"points":149,"category":137},"21796886","HNTerm",139,{"id":151,"name":152,"points":153,"category":154},"21780332","LastingPaper",138,"productivity",{"id":156,"name":157,"points":158,"category":137},"21789418","spacepub.space",131,12,false,"v2",{"id":163,"name":5,"line":6,"ai":160,"cat":20,"year":13,"points":14,"comments":15,"rec":28,"s":29,"top":18,"kw":164,"maker":11,"domain":10,"tier":19,"attempts":33,"strip":165,"url":9,"mix":166,"praise":66,"objection":-1,"sub":21},21827328,[24,25,26,27],"030300305",[31,32,33,33],1794036584150]