Question

我尝试在从JSON文件导入内容时将div高度与jquery匹配。在页面的第一个视图中，匹配高度在JSON文件中的所有内容完成加载之前完成加载。结果，来自JSON文件的图像被.grid-item div截断。加载完所有JSON内容后，我可以调整浏览器窗口大小或重新加载页面，匹配高度可以正常工作。但是如果我清空缓存并重新加载，匹配高度将在JSON内容完成加载之前再次完成加载。

我尝试将.matchHeight放在$ .getJSON之外，它允许从JSON文件加载所有内容但由于某种原因不匹配每个div的高度。每个div都有自己的高度。

如何告诉.matchHeight等到所有JSON内容在第一次查看页面时完成加载？

我使用GitHub的jquery.matchHeight.js代码。

的Javascript

$(document).ready(function() {

$.getJSON( "locations.json", function( data ) {

var htmlcontent = "";

      $.each( data.locations, function( key, index ) {

        var name = index.locationName;
        var state = index.locationState;
        var img = index.locationImage;
        var link = index.locationLink;

        htmlcontent += '<div class="grid-item" id"' + key + '"><h4>' + name + '</h4><h5>' + state + '</h5>' + '<img src="' + img + '">' + '</div>' ;

      });

         $( '.main' ).append(htmlcontent);
         $( '.grid-item' ).matchHeight();

    });

});

HTML

<div class="main">

</div>

<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<script type="text/javascript" src="jquery.matchHeight.js"></script>
<script src="loadjson.js"></script>

CSS

img {
    margin-top: 15px;
}

.main {
    text-align: center;
}

.grid-item {
    padding: 20px;
    border: 1px solid black;
    background-color: #eeeeee;
    width: 275px;
    float: left;
}

Answer 1

如果您需要确保$.getJSON在运行其他任何内容之前完成，则可以使用done()。见$.getJSON from jQuery docs

你可以像这样实现它：

＆＃13;

$.getJSON( "locations.json", function( data ) { // data optional
  // do stuff with data
}).done(function(data){
  // check data, if good then run matchHeight()
  $( '.grid-item' ).matchHeight();
});

＆＃13;

*除了$(window).on("load", handler)给出的答案

Answer 2

为了匹配首次加载时的高度，即没有缓存的图片，您需要将$(document).ready替换为$(window).on("load", handler) 你的javascript文件看起来像这样。

$(window).on("load", function() {

$.getJSON( "locations.json", function( data ) {

var htmlcontent = "";

  $.each( data.locations, function( key, index ) {

    var name = index.locationName;
    var state = index.locationState;
    var img = index.locationImage;
    var link = index.locationLink;

    htmlcontent += '<div class="grid-item" id"' + key + '"><h4>' + name + '</h4><h5>' + state + '</h5>' + '<img src="' + img + '">' + '</div>' ;

  });

     $( '.main' ).append(htmlcontent);
     $( '.grid-item' ).matchHeight();

});

});

在加载JSON内容时将div高度与jquery匹配

2 个答案: