Question

所以我创建了一个wowslider画廊动态，因此它加载了特定文件夹中的所有图像。但问题是它们都会同时加载并且加载时间太长。我想让它们按顺序加载，一个接一个地使用js或jquery。我的代码;

<div class="ws_images"  >
<ul>
    <?php // start looping the pics 
    $inc = 0;
    foreach (new DirectoryIterator('gallery/data1/images/') as $file) {
    if($file->isDot()) continue; 
    $withoutExt = preg_replace('/\\.[^.\\s]{3,4}$/', '', $file->getFilename()); //removing the extension
    ?>

    <li>
    <img class='imgs' src="gallery/data1/images/<?php echo $file->getFilename();  ?>" alt="<?php echo $withoutExt ?>" title="<?php echo $withoutExt;  ?>" id="wows1_<?php echo $inc; $inc++; ?>"/>
    </li>
    <?php } // ending the loop ?>

    </ul>
    </div>

我发现这个帖子Controlling image load order in HTML解决了我猜的问题，但是我无法将其实现到我的动态代码中...我尝试了很多方法，但没有一个有效，请帮助！

Answer 1

在这里，您可以通过此处发布的答案中的代码实现

<div class="ws_images"  >
    <ul>
        <?php // start looping the pics 
            $inc = 0;
            foreach (new DirectoryIterator('gallery/data1/images/') as $file) {
            if($file->isDot()) continue; 
            $withoutExt = preg_replace('/\\.[^.\\s]{3,4}$/', '', $file->getFilename()); //removing the extension
            ?>

            <li>
            <img class='imgs' img-name="<?php echo $file->getFilename();  ?>" src="" alt="<?php echo $withoutExt ?>" title="<?php echo $withoutExt;  ?>" id="wows1_<?php echo $inc; $inc++; ?>"/>
            </li>
        <?php } // ending the loop ?>

    </ul>
</div>



<script>
    var imgAddresses = [];

    $('.ws_images ul li').each(function(){
        imgAddresses.push($(this).find('img').attr('img-name'));
    });



    function loadImage(counter) {
      //Break out if no more images
      if(counter==imgAddresses.length) { return; }

      //Grab an image obj
      var I = document.getElementById("wows1_"+counter);

      //Monitor load or error events, moving on to next image in either case
      I.onload = I.onerror = function() { loadImage(counter+1); }

      //Change source (then wait for event)
      I.src = 'gallery/data1/images/'+imgAddresses[counter];
    }

    loadImage(0);
</script>

你需要测试这段代码，因为我没有测试它，但我写的只是为了让你知道如何做到这一点

动态加载来自服务器的图像（对于html库）

1 个答案: