Как загружать миниатюры изображений начальной загрузки

Я начал использовать Bootstrap для проекта и, в частности, компонент Thumbnails. На примере миниатюр в документации показан следующий пример кода:

<ul class="thumbnails">
  <li class="span4">
    <a href="#" class="thumbnail">
      <img data-src="holder.js/300x200" alt="">
    </a>
  </li>
  ...
</ul>

Обратите внимание на использование data-src для замены обычного атрибута src в теге <img>.

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

Является ли это опечаткой в документации или я не понимаю, как использовать data-src?

Ответ 1

Я считаю, что единственная причина, по которой пользователи bootstrap используют data-src вместо src, из-за holder.js. Вы должны использовать src вместо data-src, потому что data-src используется только для библиотеки javascript, которая генерирует примеры изображений определенного размера, а src является обычным атрибутом для указания местоположения изображения (Источник: W3C)

Почему они используются в документации data-src? Я полагаю, что даже синтаксис <img src="holder.js/100x200"></img> принимается библиотекой так же, как и в document.js, когда мы получаем доступ к странице, она выдает ошибку 404 в изображении, даже когда изображение отображается, потому что нет никакого файла в указанном пути, что это странно.

Почему они помещают это в код документации? Я действительно не знаю. Наверное, это ошибка. Но я уверен, что вы должны использовать src вместо data-src в миниатюрах.

Ответ 2

Как использовать его

Включите holder.js в свой HTML:

<script src="holder.js"></script>

Затем Holder обрабатывает все изображения с помощью специального атрибута src, как этот:

<img src="holder.js/200x300">

Вышеуказанный тег будет отображаться как заполнитель 200 пикселей в ширину и 300 пикселей в высоту.

Чтобы избежать ошибок в консоли 404, вы можете использовать data-src вместо src.

Держатель также включает поддержку тем, чтобы помочь заполнителям заполнить ваш макет. Существует 6 тем по умолчанию: sky, vine, lava, gray, industrial и social. Вы можете использовать их следующим образом:

<img src="holder.js/200x300/industrial">

Ответ 3

В своей документации Bootstrap использует держатель для эскизов.

Это довольно хорошо объяснено на странице gidub владельца..

Включите файл holder.js в свой HTML. Затем Holder обрабатывает все изображения с помощью определенного атрибута src... Тег будет отображаться как заполнитель. Чтобы избежать ошибок в консоли 404, вы можете использовать data-src вместо src.

Ответ 4

Я тоже не мог понять, насколько я понимаю, что holder.js на самом деле является полностью отдельным файлом js, который выступает в качестве img-заполнителя из http://imsky.github.io/holder/

data-src используется для перехода к javascript,/100x200 - это размер изображения, в котором вы хотите, чтобы javascript "holder.js" занимался реальным img.

Я думаю, что идея состоит в том, чтобы прототип использовать это (data-src= "holder.js/300x200" ), а затем заменить его на размерные изображения (src= "Logo.png" ).

Ответ 5

Чтобы заставить меня работать, мне пришлось вызвать функцию run() в держателе.

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

var Holder = require('holderjs');

Затем внутри рендеринга я могу запустить

Holder.run();

И в моем шаблоне я

<div class="row">
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
  <img data-src="holder.js/200x200/text:hello world">
  <div class="caption">
    <h3>Thumbnail label</h3>
    <p>...</p>
    <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
  </div>
</div>

Надеюсь, что это поможет.