Question

我正在使用一个简单的预加载效果对多个项目进行重叠，当页面准备就绪时，将DIV与JavaScript淡出：

        <script type="text/javascript">

        $(window).load(function() {
        $('#preloader').delay(350).fadeOut('slow'); // will fade out the white DIV that covers the div
        }); 

        </script>

因为我正在使用无限AJAX滚动，所以它仅在页面中显示的第一个项目时触发。我也尝试了rendered event，但它似乎也没有用。

这是代码。请注意，它从文件夹中动态获取图像：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

<head>
<title>blabla title</title>
<link rel="canonical" href="http://www.website.net" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>

<body class="docs">
<div id="base-container">
    <div id="main">
        <div class="post">
            <table cellpadding="4" cellspacing="0">

                <?php
                    $dir   = 'img/'; // dir for images
                    $filetype = '*.*';
                    $allow = array('jpg','jpeg', 'JPEG', 'JPG', 'gif', 'GIF', 'png', 'PNG'); // extensions
                    $files = glob($dir.$filetype);
                    $newest_images_first = true;
                    $files = array_reverse($files); // reverse
                    $i=0;
                    $open = opendir($dir);
                    // Get filenames from dir, get extension & store in array
                    while (($file=readdir($open))!==false) {
                    $ext=str_replace('.', '', strrchr($file, '.'));
                    if (in_array($ext, $allow)) 
                    $list[$i++]=$file; }
                    $perPage= 20; //images per page
                    $total=count($list); // Number of images
                    $pages=ceil($total/$perPage);
                    $thisPage=isset($_GET['pg'])?$_GET['pg']-1:0; // did user select a specific page? Note, pages on web are counted from 1 (not zero) so must subtract 1 for correct indexing
                    $start=$thisPage*$perPage; // calculate starting index into list of filenames
                    $pageNumber= $thisPage+1;
                    $perRow= 1; // Number images per row
                    $imgCnt=0; // used to count number of images displayed and hence whether to wrap page. note, could use "for" index $i but this is computationally quicker
                    for ($i=$start;$i<$start+$perPage;$i++) {


                        // -+-+-+-+-+-+-+-+-+-+-+-+-+-+- Item -+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+- //

                        echo "<div class='item'>";

                               // Here is the DIV that covers .item
                                echo '<div id="preloader" ></div>';

                            if (isset($list[$i])) {

                            echo "<figure>";
                                echo '<div class="photo">';

                                    $title = substr($files[$i],strlen($dir),strrpos($files[$i], '.')-strlen($dir)); // get filename, ignore path and text since last '.'
                                    echo '<img src="'.$files[$i].'" alt=" '.$title.'" onload="this.width*=0.6">'; // image!

                                echo "</div>";

                                echo "<figcaption>";                    

                                    echo '<h2>'."". $title .'</h2>'; // show title                              

                                echo "</figcaption>";       
                            echo "</figure>";           
                        echo "</div>"; // -> .item

                            }
                            else {
                            echo "<td></td>"; // create an empty td
                            }

                    $imgCnt+=1; // increment images shown
                    if ($imgCnt%$perRow==0) // if image count divided by number to show per row has no remainder then it's time to wrap
                    echo "</tr><tr>";
                    }
                    echo "</tr>";

                    closedir($open); ?>

            </table>        
        </div> <!-- post -->


        <!-- +-+-+-+-+-+-+-+-+-+-+-+-+-+- Item -+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+ -->
        <ul id="pagination">
            <li class="prev"><?php if ($pageNumber > 1) : ?><a href="history.php?pg=<?= $pageNumber - 1; ?>">Prev</a><? endif ?></li>
            <li class="next"><? if ($pageNumber < $pages) : ?><a href="history.php?pg=<?= $pageNumber + 1; ?>">Next</a><? endif ?></li>
        </ul>

        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
        <script type="text/javascript" src="js/jquery-ias.min.js"></script>



        <!-- +-+-+-+-+-+-+-+-+-+-+-+-+-+- IAS -+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+ -->

        <script type="text/javascript">

        if($(window).width() >= 600){ //activate ias scrolling for windows bigger than 600px

        var ias = $.ias({
            container:  "#base-container",
            item:       ".item",
            pagination: "#pagination",
            next:       ".next a",
            delay:      1500
            });
            ias.extension(new IASSpinnerExtension({ src: 'bundles/spinner.gif' }));
            ias.extension(new IASTriggerExtension({ offset: 100, text: 'Load more' }));
            ias.extension(new IASNoneLeftExtension({text: 'You reached the end.'}));
            ias.extension(new IASPagingExtension());
            ias.extension(new IASHistoryExtension({ prev: '.prev a' }));
        }
        </script>

    </div> <!-- #main -->
</div> <!-- #base-container -->


<footer>
</footer>


    <!-- +-+-+-+-+-+-+-+-+-+-+-+-+-+- Preloader -+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+ -->

    <!-- Preloader -->
    <script type="text/javascript">

        $(window).load(function() {
        $('#preloader').delay(350).fadeOut('slow'); // will fade out the white DIV that covers the div
        }); 

    </script>

我没有包含整个CSS，预加载器只是一个div：

#preloader {
position:absolute;
height: 100%;
width: 100%;
background-color:red; /* Make red to make it visible */
opacity: 0.5; /* See through */
z-index:99;
}

知道如何解决这个问题吗？

如何不止一次发射预加载效果？

0 个答案: