JQuery LazyLoad не загружает изображения до прокрутки

Ответ 1

Ваши изображения должны иметь ширину и высоту.

Ответ 2

$("img.lazy").lazyload({
             threshold : 50
         });

И добавьте это:

$(window).load(function(){
     $("html,body").trigger("scroll");
});

Ответ 3

Попробуйте это....

$(function() {
    $("img.lazy").show().lazyload()
    window.onload = function() {
        $(window).resize()
    };
});

Ответ 4

Текущая версия Lazyload запускает начальное обновление при событии загрузки окна. Поэтому, если вы загружаете изображения динамически позже, вам потребуется дополнительное событие, например свиток для запуска цикла обновления. Это была моя проблема с изображениями, появляющимися только после прокрутки.

Ответ 5

Я слишком поздно, но если вы все еще сталкиваетесь с этой проблемой, используйте чистую комбинацию javascript setTimeout() и window.scrollBy() на нужном событии. Я решил использовать onClick, поскольку мне приходилось показывать изображения под вкладками, в которых только первая загруженная вкладка показывала изображения, когда страница загружалась, но остальные вкладки не показывались при нажатии, пока пользователь немного прокручивается. мой код ниже:

function myFunction() {
  setTimeout(function() {
    window.scrollBy(0, 100)
  }, 1000);;
}

<style>
  div {
    background-color: #FF9900;
    height: 999px;
    width: 100%;
  }
</style>

<a href="#" onClick="myFunction()">Click me to scroll after 1000 milliseconds</a>
<div></div>

Ответ 6

Это то, что решило эту проблему для меня:

$("html,body").on('scroll', function(){ 
    $(window).resize() 
});

Его очень просто, он просто делает window.resize в событии прокрутки из тегов body и html. бам.

Ответ 7

Я получаю свои изображения через запрос $.post() всякий раз, когда я фильтрую некоторые вещи, поэтому мне нужно все, что нужно запускать при каждой перезагрузке

$.post( "queries.php", { var1:var1, var2:var2, .. }, function(response){
  for( var i=0; i<response.length; i++ ) { $("#container").append(response[i]); }
  $("img.lazy").lazyload();
  $(window).resize();
}, "json");

Ответ 8

Когда вы инициализируете lazyload, вы можете сказать, какое событие запускать (по умолчанию оно установлено на "прокрутка" ). Я предлагаю добавить в этот список настраиваемое событие и запускать его, когда это имеет смысл для вас:

$('.lazy').lazyload({
    event: 'scroll whenever-i-want'
});

// whenever you want to trigger your event (after ajax load, on dom ready, etc...)
$(document).trigger('whenever-i-want');

Это оставляет функциональность прокрутки по умолчанию, но также позволяет запускать ленивую загрузку по требованию.

Ответ 9

$(document).ready(function () {
$("img.lazy").lazyload({
<br/>placeholder: rooturl + "Themes/images/imgloading.gif",<br/>
                 effect: "fadeIn",<br/>
                 skip_invisible: false<br/>
                 });<br/>
        });<br/>

$(document).ready(function() {<br/>
       $(window).load(function() {<br/>
             update();<br/>
         }); <br/>
  });<br/>

Используйте эту ленивую загрузку script https://github.com/tuupola/jquery_lazyload/blob/master/jquery.lazyload.js#L130

Ответ 10

Как найдено в этом вопросе fooobar.com/questions/349707/..., установка skip_invisible для false разрешила проблему для меня

Ответ 11

Для слайдеров, имеющих несколько изображений, упорядоченных по z-индексу, пригодится опция lazyload failure_limit.

Подробнее об этой опции здесь