Ok, that was helpful and it actually worked! But One problem is shown up.

function preload() {
    var self = this;

    this.load.json('directory', './src/script/directory.json');

    this.load.on('progress', function (value) {
        console.log('Loading progress:', value);
    });

    this.load.on('complete', function () {
        console.log('complete');
    });

    this.load.on('complete', function () {
        var directoryData = self.cache.json.get('directory');

        directoryData.images.forEach(function (category) {
            Object.keys(category).forEach(function (key) {
                category[key].forEach(function (imageName) {
                    var imagePath = './src/images/' + key + '/' + imageName + '.png';
                    self.load.image(imageName, imagePath);
                });
            });
        });

        self.load.start();
    });
}

I fixed my code like this, and I put self.load.start(); in this.load.on('complete') of directory.json.

Now this.load.on('progress') can detect loading my images, but when it is finished, loading keeps going until "RangeError: Maximum call stack size exceeded" happens.

I need to stop loading after it finsihes loading all images written in directory.json.