FlexSlider使用時に画像が表示されない

###実現したいこと
FlexSliderを使用して画像ギャラリーを作りたい

###発生している問題
画像が表示されない…基本的な箇所でどこかミスがあるのではとは思っています。

HTML
1
2<!DOCTYPE html>
3<html>
4<head>
5  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
6  <meta http-equiv="Content-Style-Type" content="text/css">
7  <meta http-equiv="Content-Script-Type" content="text/javascript">
8  <title>テストページ</title>
9	<link rel="stylesheet" href="flexslider.css">
10	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
11	<script src="jquery.flexslider-min.js"></script>
12	<script type="text/javascript" charset="utf-8">
13	$(window).load(function() {
14		$('.flexslider').flexslider();
15	});
16	</script>
17</head>
18<body>
19	<div class="flexslider">
20		<ul class="slides">
21			<li><img src="image/01.jpg" /></li>
22			<li><img src="image/02.jpg" /></li>
23			<li><img src="image/03.jpg" /></li>
24			<li><img src="image/04.jpg" /></li>
25			<li><img src="image/05.jpg" /></li>
26			<li><img src="image/06.jpg" /></li>
27		</ul>
28	</div>
29</body>
30</html>
31

###試したこと
最初Linux上で表示されなかったので、ローカルで試してみても表示されませんでした。
flexslider.css無しですと、画像は表示されます。

###補足情報
image配下に画像はあります。

行動規範の内容に同意します

回答1件

ベストアンサー

$(window).load(function() { ... });を$(window).on("load", function () { ... });とすることで解決できると思います。

HTML
1<!DOCTYPE html>
2<html>
3<head>
4    <meta charset="UTF-8">
5    <title>テストページ</title>
6    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flexslider/2.6.4/flexslider.min.css">
7    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
8    <script src="https://cdnjs.cloudflare.com/ajax/libs/flexslider/2.6.4/jquery.flexslider.min.js"></script>
9    <script type="text/javascript">
10        $(window).on("load", function () {
11            $('.flexslider').flexslider();
12        });
13    </script>
14</head>
15<body>
16<div class="flexslider">
17    <ul class="slides">
18        <li><img src="https://placehold.jp/3d4070/ffffff/150x150.png?text=image/01.jpg"/></li>
19        <li><img src="https://placehold.jp/3d4070/ffffff/150x150.png?text=image/02.jpg"/></li>
20        <li><img src="https://placehold.jp/3d4070/ffffff/150x150.png?text=image/03.jpg"/></li>
21        <li><img src="https://placehold.jp/3d4070/ffffff/150x150.png?text=image/04.jpg"/></li>
22        <li><img src="https://placehold.jp/3d4070/ffffff/150x150.png?text=image/05.jpg"/></li>
23        <li><img src="https://placehold.jp/3d4070/ffffff/150x150.png?text=image/06.jpg"/></li>
24    </ul>
25</div>
26</body>
27</html>