Lazyload preloads images with display:none, contrary to JQuery's Lazyload
we have a lot of content that is never displayed on the site because the entire block has css: display:none.
with jquery lazyload (http://www.appelsiini.net/projects/lazyload) this works perfectly, I have about HALF the requests that ngx_pagespeed produces, since most pictures aren't shown anyways.
any way to fix this?
- 点赞 评论 复制链接分享
That plugin does have a 'skip_invisible' option default to true which skips loading of
display: noneimages, but that seems unsafe to me unless you are binding other events to show the images (which that plugin does let you do). As Jeff mentioned, it's probably not the scroll or resize events that cause the display property to change. The ngx_pagespeed lazyloader is designed to not require any changes to your input html to work. But for your particular use case, if you know which events are changing display and are willing to modify your input source, you might get more mileage from something like that jquery plugin.点赞 评论 复制链接分享
i tried that, but then pagespeed doesn't optimize the pictures... can I somehow get pagespeed to go for the data-original attribute instead of src?点赞 评论 复制链接分享
can I somehow get pagespeed to go for the data-original attribute instead of src?
Actually, yes! I think https://developers.google.com/speed/pagespeed/module/domains#url-valued-attributes might do what you need.点赞 评论 复制链接分享
data-originalworked, right? So this is resolved? Reopen if you want me to look at this more.点赞 评论 复制链接分享
You just saved my life (or at least a few days of it) with that skip_invisible setting that I didn't know existed. ARGH. Thanks!点赞 评论 复制链接分享
Does the lazyload_images filter do what you want here? https://developers.google.com/speed/pagespeed/module/filter-lazyload-images点赞 评论 复制链接分享
that's what I meant; I activated that pagespeed-filter and deactivated my own jquery lazyload, now the requests went up.点赞 评论 复制链接分享
Looking at the source I see:
<img pagespeed_lazy_src="uploads/pics/casserole24/55x68xtelefonfrau.png.pagespeed.ic.J8CisLNjLq.png" width="55" height="68" border="0" alt="" src="/ngx_pagespeed_static/1.Hy2LQaukh5.gif" onload="pagespeed.lazyLoadImages.loadIfVisible(this);">
Which I think means that pagespeed is correctly lazyloading the image but incorrectly determining that the image is visible (
loadIfVisibleis returning true when it shouldn't).点赞 评论 复制链接分享
maybe because of this ;)
I believe the order of those two checks should be reversed, or the first one even removed.
I'm not sure if I can overwrite that prototype, otherwise I'll have to compile PSOL from source, I guess...
JQuery does this in the same way as it turns out:
jquery: "In jQuery 1.3.2 an element is visible if its browser-reported offsetWidth or offsetHeight is greater than 0."点赞 评论 复制链接分享
I think you're right that the
position == relativecheck could go later, but I don't think that's the whole problem here. With pagespeed if we fix that we're still going to load the element, just after onload, while I think with your current jquery based solution the image isn't loaded until (if) it becomes visible.
But how does your jquery solution know when that happens? How is it notified of visibility changes?点赞 评论 复制链接分享
it binds to scroll and resize events:
https://raw.github.com/tuupola/jquery_lazyload/master/jquery.lazyload.js (look for update())点赞 评论 复制链接分享
- laravel Lazy Eager正在加载orderBy相关模型
- 如何在Lazy Loading方式中使用联盟/路线中的通配路线
- manqy-to-one lazy=false 无法延迟加载而读取大量对象到内存
- A Lazy Worker
- Lazy Salesgirl
- Lazy Pianist
- Jquery easyui框架下使用分页pagination时如何获取页面的参数
- Lazy Evaluation
- Too Lazy To Move
- Lazy Cows
- lazyload.js 的用法问题