JQuery .load（）不显示图像

I've been trying to figure out for hours on how to make JQuery's .load() work. Here is the full code - it is an external JS file:

$(document).ready(function() {
  $(".loader a").hide();
  $(".loader a").find("img").on("load", function() {
    $(this).closest(".loader a").fadeIn("normal");
  });
);

$(".loader a").hide(); works but the rest don't - the images don't show up and they still remain hidden. It is unlikely the cause but do you think it has something to do with the PHP-JSON code? I don't know. Hope you guys can help. Cheers!

<?php
  $str_data = file_get_contents("portfolio/portfolio.json");
  $json = json_decode($str_data, true);
  shuffle($json['portfolio']);

  foreach ($json['portfolio'] as $portfolio) {
    echo "<div class='col-lg-3 col-md-4 col-xs-12 thumbnail portfolio-thumb'>";
      echo "<div class='portfolio-thumb-img'>";
        echo "<div class=\"loader\"><a href=\"", $portfolio["url"], "\"><img src=\"", $portfolio["main_image_url"], "\"></a></div>";
        echo "<h3>", $portfolio["title"], "</h3>";
        echo "<p>", $portfolio["category"], "</p>";
      echo '</div>';
    echo '</div>';
  }
?>

That above code is a PHP include file and it is going to be merged with the header.php and footer.php.