Question

Реализовал или пытаюсь реализовать Lazy Load (ленивая загрузка) на своем сайте вроде все получилось но что то наверное не так, мне не особо нравится отрисовка при загрузке сттраницы, вместо картинок первоночально появляются описание alt, далее подгружается картинка, хотя должна отрисовыться заставка далее по мере прокрутки за определенное количество пиксеслей основная картинка.

пример реализации:

 

часть блока:

<!-- Контейнер с адаптиными блоками -->
<div class="masonry-b">
 <!-- Адаптивные блоки с содержанием -->
 <div class="item-b">
<div class="text-b"><a href="/shop/shtatnaja-magnitola-redpower"><h2>Штатные магнитолы RedPower</h2></a></div>
<div class="img-b"><a href="/shop/shtatnaja-magnitola-redpower">
<img class="lazyload" data-src="/bloki_glavnoy/redpowershgu.jpg" alt="Штатные магнитолы RedPower,Навигационный блок Redpower, Зеркало заднего вида RedPower, Камера заднего вида RedPower, Штатные видеорегистраторы RedPower, Аксессуары для RedPower" title="Штатная магнитола RedPower,Навигационный блок Redpower, Зеркало заднего вида RedPower, Камера заднего вида RedPower, Штатный видеорегистратор RedPower, Аксессуары для RedPower"></a></div>
 </div>
 
 <div class="item-b">
<div class="text-b"><a href="/shop/shtatnye-magnitoly-unison"><h2>Штатные магнитолы UNISON</h2></a></div>
 <div class="img-b"><a href="/shop/shtatnye-magnitoly-unison">
<img class="lazyload" data-src="/bloki_glavnoy/unisonshgu.jpg" alt="Штатные магнитолы Unison" title="Штатная магнитола Unison"></a></div>
 </div>
 
 <div class="item-b">
<div class="text-b"><a href="/shop/shtatnye-magnitoly-daystar"><h2>Штатные магнитолы DAYSTAR</h2></a></div>
 <div class="img-b"><a href="/shop/shtatnye-magnitoly-daystar">
<img class="lazyload" data-src="/bloki_glavnoy/daystarshgu.jpg" alt="Штатные магнитолы DAYSTAR" title="Штатные магнитолы DAYSTAR"></a></div>
 </div>
 <!-- Конец адаптивных блоков с содержанием -->
 </div>
 <!-- Конец контейнера с адаптивными блоками -->

Скрипт:

<script defer src="/js/jquery.lazyloadxt.min.js"></script>
<script defer type="text/javascript">
 $(document).ready(function () {
 $("img.lazyload").lazyload({
  placeholder : "/images/loading-1-.gif",
   threshold : "200"
  effect : "fadeIn"

 });
 });

 </script>

 

 

Answer 1

То что вам не нравится это одно, а то что так работает скрипт, это второе. То есть никак не связанные элементы между собой, как устроен скрипт и как он работает и как вам хотелось бы. Если хочется по другому, за доработкой обращайтесь к автору скрипта.

Comments

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

<script defer type="text/javascript">
 $(document).ready(function () {
 $("img.lazyload").lazyload({
  placeholder : "/images/loading-1-.gif",
   threshold : "200"
  effect : "fadeIn"

 });
 });

 </script>

---

aksshop,

Сейчас у вас скрипт https://www.aksshop.ru/js/lazyload.js отдает 404 ошибку. Вы скрипт в папку js не загрузили.

---

aksshop,

Попробуйте удалить из скриптов атрибут defer.

---

Sentimo,

Удалил defer, ничего не изменилось, то очем я писал на главной странице не так видно. Для более наглядно просмотра надо смотреть страницу с категорией товара пример: https://www.aksshop.ru/shop/shtatnaja-magnitola-redpower/avtomagnitoly-redpower

---

aksshop,

Как вариант, этот скрипт  <script defer type="text/javascript">   $(document).ready(function () {   $("img.lazyload").lazyload({    placeholder : "/images/loading-1-.gif",     threshold : "200"    effect : "fadeIn"   });   });   </script> тоже поместить в футер.

---

Sentimo,

Это скрипт не работает если его убрать в футер, он должен присутствовать буквально везде,там где прописано <img class="lazy" data-original="">