Я знаю, что об этом спрашивали миллион раз. Смотрю другие темы для решения и пока не могу исправить.
Я использую Masonry для разработки системы сетки, такой как изображения pinterest и google. Это работает нормально. Изображения правильно загружаются в Firefox, но в Chrome/Safari они перекрываются, пока я не обновлю страницу. Что странно, потому что изображения нормально загружаются на моем iphone (пока я не обновляю страницу и они не перекрываются).
Также я только что заметил ошибку, которую Firebug выдает мне в сценарии загрузки изображений. Эта линия.
} else if ( typeof obj.length === 'number' ) {
Вот моя настройка страницы.
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"/>
<title>Home page</title>
<meta name="description" content="description here" />
<link rel="stylesheet" href="css/global.css" media="screen" />
<script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>
<!-- external jQuery file to fall back on !-->
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="js/masonry.pkgd.min.js"></script>
<script src="js/imagesloaded.pkgd.js"></script>
<script>
var container = document.querySelector('#container');
var msnry;
// initialize Masonry after all images have loaded
imagesLoaded( container, function() {
msnry = new Masonry( container );
});
</script>
</head>
<body>
<section id="container" class="js-masonry" data-masonry-options='{ "columnWidth": 30, "itemSelector": ".item" }'>
<h1 class="hidden">Main Container</h1>
<div class="item">
<img src="images/long.jpg">
</div>
<div class="item">
<img src="images/small.jpg">
</div>
<div class="item">
<img src="images/long.jpg">
</div>
<div class="item">
<img src="images/small.jpg">
</div>
<div class="item">
<img src="images/small.jpg">
</div>
<div class="item">
<img src="images/long.jpg">
</div>
<div class="item">
<img src="images/small.jpg">
</div>
<div class="item">
<img src="images/long.jpg">
</div>
<div class="item">
<img src="images/small.jpg">
</div>
</section>
</body>
</html>
Итак, как мне исправить эту проблему с перекрытием на странице обновления?
пс. Я должен упомянуть, что в браузерах изображения будут перекрываться только при обновлении с помощью Ctrl + F5. Обычная страница обновления не складывает изображения.