使用DirectoryIterator将脚本中的图像加载到Flexbox中

时间:2016-01-09 21:33:19

标签: javascript php html flexbox

我看过很多帖子,但仍然无法正常使用。我正在写一个电影评论网站,我想将电影标题的图像加载到我的flexbox中。

<body>
    <ul class="flex-container">
        <?php
            foreach (new DirectoryIterator('/Volumes/Movies') as $file) {
                if($file->isDot() || $file->getBasename() === '.DS_Store' || $file->getExtension() === 'srt') continue;
                $fullDir = "/Movies/" . $file;
                $fileParts = explode(".", $file);       
                $img = file_get_contents('http://www.movieposterdb.com/embed.inc.php?movie_title='.$fileParts[0]);  
                echo '<li class="flex-item"><img src="' . $img . '" /><a href="Movies/'. $file .'" download>'. $file .'</a></li>';

            }
        ?>
    </ul>
</body>

电影只是以movieposterdb ex所需格式标题的文本文件。 Avatar (2009).txt。这是我最近的尝试。我看到我的flexbox上的图像,但图像永远不会加载。如何从movieposterdb获取延迟加载图像到我的flexbox容器中?

1 个答案:

答案 0 :(得分:2)

检查movieposterdb的输出。它返回js document.write,如下所示:

document.write('<a target=\"_new\" href=\"http://www.cinematerial.com/movies/avatar-i499549\"><img title=\"Avatar\" alt=\"Avatar\" style=\"width: 100px; height: 143px; border: 0px;\" src=\"http://www.movieposterdb.com/posters/10_08/2009/499549/t_499549_43475538.jpg\" /></a>');

所以你的代码将是这样的:

<body>
    <ul class="flex-container">
        <?php
            foreach (new DirectoryIterator('/Volumes/Movies') as $file) {
                if($file->isDot() || $file->getBasename() === '.DS_Store' || $file->getExtension() === 'srt') continue;
                $fullDir = "/Movies/" . $file;
                $fileParts = explode(".", $file);       
                $img = file_get_contents('http://www.movieposterdb.com/embed.inc.php?movie_title='.$fileParts[0]);  
                echo '<li class="flex-item"><script>' . $img . '</script><a href="'. $fullDir .'" download>'. $file .'</a></li>';

            }
        ?>
    </ul>
</body>