jQuery Lazy не работает в мобильных браузерах после запроса ajax - PullRequest
Новая
       8

jQuery Lazy не работает в мобильных браузерах после запроса ajax

0 голосов
/ 20 октября 2019

Использование jQuery Lazy (http://jquery.eisbehr.de/lazy/) ПРОСТО ВКЛЮЧЕНО (некоторые?) МОБИЛЬНЫЕ БРАУЗЕРЫ (в данном случае Chrome и Firefox Klar на Android) некоторые изображения не будут загружаться после того, как ajax вставит контент в DOM, в то время как другие это делают. В браузерах для настольных компьютеров все работает нормально.

РАБОТАЮЩИЙ JS для контента, сгенерированного AJAX 

    $(document).ready(function() {
        /* OPEN TAB WHEN CLICKED ON IT */
        $("input[id^='tab']").on("click tap",function() {
            tabnum = this.id.slice(-1);
            /* IF NOT YET LOADED, THEN THERE IS A SPINNER ICON IN THE TAB */
            if($('#content' + tabnum).find('.fa-spinner').length) $.ajax({url:"...",
                type: "GET",
                data: {type: "load_tab",tab: this.value, section_name: $.urlParam('section'),section_id: $('#portraitid').val()},
                success:function(result) {
                    $("#content" + tabnum).html(result);
                    if(tabnum == 8) FB.XFBML.parse();
                }
            });
        });
    });

СЛЕДУЮЩИЙ ДЕЛАЕТНЕ РАБОТАЕТ ПОСЛЕ АЯКСОВОГО ВЫЗОВА НА МОБИЛЬНЫХ БРАУЗЕРАХ

HTML 

<div name="blogpost">
  /* OTHER STUFF HERE */
  <div style="width:80%;text-align:left;">
    <a href="...">
      /* LOADING LOCAL CONTENT */
      <div id="picture" class="blogpostpicture lazyImg" data-src="..." style="position:relative;border:solid 10px rgba(255, 255, 255, 0.8);width:100%;max-width:900px;height:125px;background-image:url('cont/portrait/transpix.png');background-repeat:repeat, no-repeat;background-size:100%;background-position:83% 33%;margin-bottom:10px;" title="...">
      </div>
    </a>
  </div>
  /* OTHER STUFF HERE */
</div>

JS 

/* LOADS IMGs RELIABLY ON DESKTOP BROWSERS BUT NOT ON MOBILE AFTER AJAX CALLS */
$(document).ajaxComplete(function() {
  $(".lazyImg").Lazy();
});

В КОНТРАСТЕ СЛЕДУЮЩИХ РАБОТ (ВНУТРИ СЛАЙДЕРА FLEXBOX) ПОСЛЕ АЯКСОВОГО ВЫЗОВА, ТАКЖЕ НА МОБИЛЬНЫХ БРАУЗЕРАХ

HTML 

<div class="sliderDiv inhaltlinks">
  /* MORE sliderElmnt DIVs */
  <div class="sliderElmnt">
    <a href="...">
      /* LAZY LOADING NON-LOCAL CONTENT */
      <div class="sliderPicture lazySlider" data-src="https://....jpg" style="background-image:url('cont/portrait/transpix.png');background-position:center center;">
        <div class="fa-3x missingSliderPictureIcon" style="color:white;">...</div>
        <div class="newLabelPreviewPic">...</div>
      </div>
    </a>
    <a href="...">
      <div class="sliderTitle">...</div>
    </a>
    <div class="sliderDescription">...</div>
  </div>
  /* MORE sliderElmnt DIVs */
</div>

JS 

/* LAZY LOAD FOR ALREADY OPENED SLIDER */
$(document).scroll(function(){ /* <- FIXES BUG(?) THAT SLIDER OUTSIDE INITIAL VIEWPORT ARE LOADED ONLY ON HORIZONTAL SCROLL */
  $('.sliderDiv:not(.closed)').find('.lazySlider').Lazy({
    bind: "event",
    scrollDirection: 'both',
    effect: 'fadeIn',
    appendScroll: $('.sliderDiv')
  });
});

Даже если я связываюLazy() к событию прокрутки в нерабочем примере явно, аналогично рабочему примеру Slider, результат остается тем же: не работает в мобильном браузере Chrome. В примерах не видно никаких различий, которые могли бы вызватьдругой результат.

На данный момент у меня неудовлетворительная работавокруг решения, проверяя, сгенерирован ли Ajax контент или нет, а затем с помощью простого условия if() решает, включать ли изображения напрямую или с помощью Lazy().

...