weixin_39927508
weixin_39927508
2021-01-09 01:09

LazyLoad

Firstly, thank you for implementing the last feature I wrote to you about (Pause on Hover).

Something I've been trying to (unsuccessfully) implement is a Lazy Load for images in each Slide.

Do you have any plans to implement something to that matter that uses the standard data-original to src method?

该提问来源于开源项目:viljamis/ResponsiveSlides.js

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享
  • 邀请回答

11条回答

  • weixin_39862716 weixin_39862716 3月前

    or like that CodePen

    点赞 评论 复制链接分享
  • weixin_39862716 weixin_39862716 3月前

    It can be easily achieved with tiny change https://github.com/viljamis/ResponsiveSlides.js/pull/382

    点赞 评论 复制链接分享
  • weixin_39881387 weixin_39881387 3月前

    I had taken that approach recently, but now I'm doing it on a new project and it's not working the way I expect. I've taken your code and put it in a CodePen. Any ideas how to access the current slide in the before and after hooks?

    点赞 评论 复制链接分享
  • weixin_39757212 weixin_39757212 3月前

    I used the before callback and got it working - though it breaks loading of images for browsers that don't have javascript, and requires you to specify the image as <img data-source='image.jpg'>.

    
              before: function() {                                               
                /* Allow the images to be loaded only when needed. */            
                var image = $(this).find("img");                                 
                var source = image.data('source');                               
                if (source) image.attr("src", source);                           
              }                                                                  
    
    点赞 评论 复制链接分享
  • weixin_39945792 weixin_39945792 3月前

    I'm no developer, but I got lazyloading working using this plugin: https://github.com/luis-almeida/unveil

    Setup Unveil, and then in the responsiveSlides.js find this segment: // Go to slide slideTo($(this)[0] === $prev[0] ? prevIdx : nextIdx);, put this line underneath$(this)[0] === $prev[0] ? current.eq(prevIdx-1).trigger("unveil"): current.eq(nextIdx+1).trigger("unveil");, and add this to the list of vars just above: current = $slide.find("img");. I'm sure this can be done better, but hey, it works.

    点赞 评论 复制链接分享
  • weixin_39545017 IAmAngry. 3月前

    I'll try and have a go at this tonight.

    点赞 评论 复制链接分享
  • weixin_39887546 weixin_39887546 3月前

    Someone tried the method proposed by restlessmedia? Need to figure this out...

    点赞 评论 复制链接分享
  • weixin_39976951 weixin_39976951 3月前

    +1

    点赞 评论 复制链接分享
  • weixin_39894473 weixin_39894473 3月前

    +1

    点赞 评论 复制链接分享
  • weixin_39545017 IAmAngry. 3月前

    I've though about this too. One thing that might work is to allow the first page to load normally then hook into a library initEnd routine to manually pre-load the rest of the pages. So after the closing brace of if($slide.size() > 1) trigger an end event that denotes the completion of the initialization routine. Within this event, bind the rest of the hidden pages in order. It could be tweaked to only allow the cycle to continue if the next page to display had loaded.

    点赞 评论 复制链接分享
  • weixin_39630813 weixin_39630813 3月前

    I thought of it too, tried the before&after calls but without success. This is really interesting since it would improve mobile UX a lot.

    点赞 评论 复制链接分享