slickの表示内容をjquery.csv.jsで管理したい

前提・実現したいこと

slickの表示内容（画像・文字）をcsvで管理したく、jquery.csv.jsを使用して実装できないかと考えています。

発生している問題

slickもしくはjquery.csv.js単体であれば問題なく表示できるのですが、組み合わせると初期画面でスライドが機能しません。

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<meta charset="utf-8">
4<head>
5    <meta charset="utf-8">
6    <link rel="stylesheet" type="text/css" href="css/slick.css"/>
7    <link rel="stylesheet" type="text/css" href="css/slick-theme.css"/>
8
9    <script src="js/jquery-3.3.1.min.js"></script>
10    <script type="text/javascript" src="js/slick.min.js"></script>
11    <script type="text/javascript" src="js/jquery.csv.min.js"></script>
12
13    <!-- ▼ 実行スクリプト -->
14    <script type="text/javascript" src="js/slick-style.js"></script>
15    <script type="text/javascript" src="js/csv-import.js"></script>
16
17</head>
18<body>
19  <ul class="slide_item" id="csv_import"></ul>
20</body>
21</html>
22

javascript
1//slick-style.js
2$(function() {
3  $('.slide_item').slick({
4    infinite: true,
5    dots:true,
6    autoplay: true,
7    arrows: true,
8    autoplaySpeed: 5000,
9    responsive:true,
10    slidesToShow: 4,
11    slidesToScroll: 4,
12  });
13});

javascript
1//csv-import.js
2function readCsv(data) {
3    var target = '#csv_import';
4    var csv = $.csv.toArrays(data);
5    var insert = '';
6    $(csv).each(function() {
7        if (this.length > 0) {
8            insert += '<li><dl>';
9            insert += '<dt><a href="#"><img class="slide_img" src="' + this[0] + '"></a><dt>';
10            insert += '<dd>' + this[1] + '<dd>';
11            insert += '</dl></li>';
12        }
13    });
14    $(target).append(insert);
15}
16var csvfile = 'test.csv';
17$(function(){
18    $.get(csvfile, readCsv, 'text');
19});

csv
1//test.csv
2hoge.jpg,説明文1
3hoge.jpg,説明文2
4hoge.jpg,説明文3
5hoge.jpg,説明文4

javascriptの実行タイミングの問題かと思い色々調べたのですが、なかなか機能しません。
上手くできる方法はあるのでしょうか。どなたか、ご教授のほどお願いします。

バージョン情報

slick - 1.8.1
jquery.csv.js - 0.8.9

補足

現在の画面の状態です。

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

回答1件

ベストアンサー

処理順的に先にcsv-import.jsを読み込んでからslickを読み込んでみてはいかがでしょうか？
動作順を確約したい場合はdefer属性を使用するのはいかがでしょうか。

lang=javascript
1<script type="text/javascript" src="js/csv-import.js" defer></script>
2<script type="text/javascript" src="js/slick-style.js" defer></script>

投稿2018/09/29 05:53

退会済みユーザー

総合スコア0

zenjirou

2018/09/29 06:03

ご回答ありがとうございます。 defer属性を使用してみたのですが上手くいきませんでした…。

退会済みユーザー

2018/09/29 06:08

scriptを読み込むタイミングですが、 HTMLdocumentを先に読み込んでからの方が良いですよ。 scriptタグをbodyタグの直前に移動してみてはいかがでしょうか。

zenjirou

2018/09/29 06:20

bodyタグの直前に移動するのは上記2つだけでよろしいでしょうか？一応2つを直前に置いてみたのですが、それでもslickが機能しませんでしたm(__)m

退会済みユーザー

2018/09/29 06:29

chromeを使用していればコンソールエラーが何か出ているかもしれません。コンソールエラー内容を確認してみてください。

zenjirou

2018/09/29 06:35

コンソールを確認してみたのですが、何もエラーは起きていませんでした…。

退会済みユーザー

2018/09/29 08:01

すいません。 > 組み合わせると初期画面でスライドが機能しません。 csv-import.jsの内容はHTMLdocumentには反映されていてslic.jsが正常に機能しない認識で合っていますか？？

zenjirou

2018/09/29 08:09

説明足らずですみません。その通りで、csv-import.jsの内容は反映されているので、画像と文章はリストで既に並んでいます。slick.jsが機能していません。

zenjirou

2018/09/29 08:12

質問欄に現在の画面の状態を追加いたしました。

退会済みユーザー

2018/09/29 08:15

う〜〜ん. そこまで読み込めていたらやはりタイミング的な感じがしますね。 slick関数を$(window).on('load', function(){});で囲ってhtmlと画像などの要素が読み込み終わってからslickの関数を読み込みのはどうでしょうか。もう既に試したかもしれませんが・・・。 ------------------------- //slick-style.js $(window).on('load', function(){ $('.slide_item').slick({ infinite: true, dots:true, autoplay: true, arrows: true, autoplaySpeed: 5000, responsive:true, slidesToShow: 4, slidesToScroll: 4 }); }); -------------------------

zenjirou

2018/09/29 08:26

あ、できました！！ csv-import.jsの方を$(window).on('load', function(){});をしていました、そんな事に気づかないなんて…！ありがとうございます、助かりました！

退会済みユーザー

2018/09/29 08:37

おぉーー！！！解決してよかったです！！

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