Tenemos una página web en la que las imágenes (están organizadas en filas/columnas) tienen la propiedad responsive.
Lo que tengo que hacer es poner/introducir el efecto LazyLoad (cosa que si que me funciona), pero al hacerlo y cargarse las imagenes secuencialmente, las imágenes se me superponen las de arriba con las de abajo. Así:
Lo curioso es que al mover la ventana del navegador se quedan como tienen que quedar. Así:
¿Qué puedo hacer para que al cargar la pagina, mientras se van cargando las imágenes ya se queden de la forma correcta?
Tengo un div, dentro de este div tengo un enlace (para al pulsar encima de la imagen), y dentro del enlace es donde tengo la imagen. Así:
<div class="col-lg-2 col-md-3 col-sm-3 col-xs-6 port-item 1a12">
<a href="OlafurEliasson_Sligthly.html" style="display:block; position:relative">
<img class="lazyload" data-original="../images/obras/OlafurEliasson_Sligthly.jpg" alt="obras">
</a>
</div>
Si en vez de "data-original" pongo "src" si que se quedan las imágenes ok pero no hace el efecto lazyload.
Código JQuery:
<script src="../js/lazysizes.min.js"></script>
<script src="../js/lazysizes.js"></script>
<script src="../js/jquery.lazyload.js"></script>
<script type="text/javascript" charset="utf-8">
$(function() {
$("img.lazyload").lazyload({
effect : "fadeIn"
});
});
</script>
<script src=" https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
Sii. Todos los elementos son iguales (la class=col-lg-2...). Eso es del plugin de bootstrap que yo ni he implementado ni tocado ni se como funciona (ya estaba hecho). Como lo he mostrado en la pregunta es el orden correcto, excepto la linea https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"> que en mi proyecto la tengo en el head. Todo lo otro de jquery lo tengo antes de cerrar la etiqueta .
<img class="lazyload" data-original="../images/obras/OlafurEliasson_Sligthly.jpg" alt="obras" width="300px" height="400px">
class="col-lg-2 col-md-3 col-sm-3 col-xs-6 port-item 1a12"
)?