Блог

На изображении внизу показано представление сетки начальной загрузки из 6 изображений размером 275,5 пикселей. Там, где пустое место, должны быть дополнительные изображения, они были пропущены по неизвестной причине. Во всей этой сетке около 70 изображений, когда в столбце 4 это происходит на изображении # 40. В столбце 3 это происходит на изображении # 39. Для столбца 2 эта проблема не существует. Это происходит только в IE11 и Firefox, а не в Chrome. Каждое изображение имеет одинаковый размер, в каждой ячейке нет разнообразия.

• Bootstrap v3.3.7
• normalize.css v5.0.0
• AngularJS v1.4.8
• ng-директива-lazy-image

Шаблон заключается в том, что при загрузке страницы angular вызывает обработчик .ashx, который возвращает JSON. JSON привязан к повторяющимся разделам с помощью стиля начальной загрузки. Возвращаемый JSON является чистым, как и разметка. Между этими 2 ячейками нет ненужных данных. Существует некоторая задержка загрузки изображений, на всякий случай, если это может быть потенциальной основной причиной. В отладчике F12 нет ошибок, хотя Firefox жалуется на директивы по стилю, предоставляемые bootstrap.css, что, вероятно, является известным явлением.

Пример JSON

 [{
"id": "Product 1",
"order": 1,
"thumbnailUrl": "http://local.testsite.com/~/media/19F6.ashx"
},
{
"id": "Product 2",
"order": 2,
"thumbnailUrl": "http://local.testsite.com/~/media/9557.ashx"
}]
  

Пример сгенерированной разметки. Вы получаете 1 такой div для каждого продукта.

 <div class="col-xs1-home-6 col-xs2-home-4 col-sm-home-6 
col-md-home-4 col-lg-home-3 ng-scope" ng-repeat="brand in ctrl.brands">                  
  <a href="#/gradeline?brand=Product1" 
  ui-sref="gradeline({ brand: brand.id })">
    <img src="http://local.testsite.com/~/media/19F6.ashx" 
    ng-src="http://local.testsite.com/~/media/9557.ashx">
  </a>             
</div>
  

Я попытался добавить записи в базу данных, чтобы ячейки были кратны 4, на всякий случай, если он пытался сделать так, чтобы последняя ячейка попала в 4-й столбец. Это не помогло. Я также попробовал некоторые общеизвестные стили «очистить исправление» для обозначения конца строки.