javascript - 一项更改：在加载图像之前加载元素

Question

我有一个脚本可以在加载其中的图像后加载元素。我想先加载元素然后再加载图像。有人能帮我吗？

脚本：

jQuery.ias({
    container : '#con',
    item: '.bo',
    pagination: '.pages',
    next: '.next',
    loader: '<img src="loader.gif">',
    onLoadItems: function(items) {
        // hide new items while they are loading
        var $newElems = $(items).show().css({ opacity: 0 });
        // ensure that images load before adding to masonry layout
        $newElems.imagesLoaded(function(){
            // show elems now they're ready
            $newElems.animate({ opacity: 1 });
            $('#con').masonry( 'appended', $newElems, true );
        });
        return true;
    }
});

Answer 1

add class to image you want to hide while it is loading:

load the element on the body the load your images:

<img src="image.jpg" class="preload" />

jQuery(document).ready(function(){
  jQuery(".preload").hide();
  // use :   jQuery(".preload").css("opacity","0");  to preserve the image place!
  jQuery(".preload").load(function(){ 
      jQuery(this).show();
      // Or jQuery(this).css("opacity","1");
  })
});