显示’加载’,直到所有图像都已加载并且jquery Masonry触发

前端之家收集整理的这篇文章主要介绍了显示’加载’,直到所有图像都已加载并且jquery Masonry触发前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在使用 jquery Masonry plugin并希望隐藏所有内容,直到插件触发后.默认情况下,砌体会在触发之前加载所有图像.我想显示一个’loading’div,直到插件被触发.我已经实现了一个检查分辨率高于1024px的页面,然后在页面加载时显示“加载”div,但现在页面内容出现在插件触发之前.
<script>

$(document).ready(function() {
    $('#content').show();
    $('#loading').hide();
});

$(function(){

var $container = $('#container');
var width = $(window).width(); 
var height = $(window).height(); 

if ((width > 1024  )) {

$container.imagesLoaded( function(){
  $container.masonry({
    itemSelector : '.Box',columnWidth: 120,});
    });

    }
    else {
    //load the css styles for screen res below 1024
    }

});

</script>

See working example here.

正如您所看到的,内容出现与插件触发之间存在延迟.希望有人可以帮助我在触发后延迟内容出现单位?

干杯 – 杰西

解决方法

而不是将.show()和.hide()调用放在$(document).ready()中,而是将它们放在imagesLoaded中:
$container.imagesLoaded( function(){
  $('#content').show();
  $('#loading').hide();
  /* other stuff... */
});

由于在加载图像之前文档可能已准备就绪,因此您会看到未完全加载的页面.

猜你在找的jQuery相关文章