0

20枚の画像をロードする場合、ユーザーが下にスクロールした場合にのみフェードイン効果でそれらをロードしたいと思います。

ここにコードがあります：

<?php
//Proceso de conexión con la base de datos
$conex = mysql_connect("localhost", "root", "root")
        or die("No se pudo realizar la conexion");
    mysql_select_db("sesiones_php",$conex)
        or die("ERROR con la base de datos");

//Iniciar Sesión
session_start();

//Validar si se está ingresando con sesión correctamente
if (!$_SESSION){
echo '<script language = javascript>
alert("usuario no autenticado")
self.location = "login.php"
</script>';
}

?>

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Navbar Examples</title>

<!-- Mobile viewport optimized: h5bp.com/viewport -->
      <meta name="viewport" content="width=device-width">

<!-- Main stylesheet imports bootstrap css and adds custom -->
    <link href="css/style.css" rel="stylesheet">

    <style>
        /* To keep short panes open decently tall */
        .tab-pane {min-height: 500px;}
    </style>

<!-- Modernizr for browser feature-checking 
            + HTML5shiv (included in modernizr) see modernizr.com -->
    <script src="js/modernizr-2.5.3.min.js"></script>

<!-- Fav and touch icons -->
        <!-- alternatively, remove these lines and place icons
                directly in the site parent folder 
                mathiasbynens.be/notes/touch-icons -->
    <link rel="shortcut icon" href="img/favicon.ico">
    <link rel="apple-touch-icon" href="img/apple-touch-icon.png">
    <link rel="apple-touch-icon" sizes="72x72" href="img/apple-touch-icon-72x72.png">
    <link rel="apple-touch-icon" sizes="114x114" href="img/apple-touch-icon-114x114.png">

  </head>

  <body>

    <div class="navbar navbar-fixed-top">
          <div class="navbar-inner">
            <div class="container">
              <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
              </a>
              <a class="brand" href="members.php">Divagueando</a>
              <div class="nav-collapse">
                <ul class="nav">
                  <li><a href="members.php"><i class="icon-home icon-white"></i> Inicio</a></li>
                  <li><a href="bandeja.php">Mensajes Privados</a></li>
                  <li><a href="inbox.php">Nuevo Mensaje</a></li>
                  <li class="active"><a href="galeria.php">Ver todas las fotos</a></li>
                  <li><a href="fotoperfil.php">Foto perfil</a></li>
                </ul>
                <a class="btn btn-primary pull-right" href="logout.php">Cerrar Sesion</a>
                <a class="btn btn-primary pull-right" href="configuracion.php"><?php echo $_SESSION['username'];?></a>
              </div><!-- /.nav-collapse -->
            </div><!-- /.container -->
          </div><!-- /navbar-inner -->
        </div><!-- /navbar -->



        <div class="container">

        <div class="contenedorfoto">


        <?php 
        $conexion=mysql_connect('localhost','root','root') or die('No hay conexión a la base de datos');
        $db=mysql_select_db('carpe',$conexion)or die('no existe la base de datos.');


        $id=$_SESSION['id'];
        $consulta=mysql_query("select * from datos where idUsuario='".$id."' order by id desc");
        while($filas=mysql_fetch_array($consulta)){
            $ruta=$filas['ruta'];
            $desc=$filas['descripcion'];


        ?>

        <?php echo $desc;?><br>
        <img src="imagenperfil/<?php echo $ruta; ?>" width="200" height="300"><br>
        <hr>
        <?php }?>




        </div>

      <footer>
        <p>By David Cochran of <a href="http://okwu.edu">Oklahoma Wesleyan University</a> and <a href="http://alittlecode.com/">aLittleCode.com</a> for <a href="http://webdesign.tutsplus.com/">webdesign.tutsplus.com</a>. Free for your use! (No warranties, no guarantees.)</p>
      </footer>

    </div> <!-- /container -->

<!-- ==============================================
         JavaScript below!                                                          -->

<!-- jQuery via Google + local fallback, see h5bp.com -->
      <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script>window.jQuery || document.write('<script src="js/jquery-1.7.1.min.js"><\/script>')</script>

<!-- Bootstrap JS: compiled and minified -->
    <script src="js/bootstrap.min.js"></script>

<!-- Example plugin: Prettify -->
    <script src="js/prettify/prettify.js"></script>

<!-- Initialize Scripts -->
        <script>
            // Activate Google Prettify in this page
            addEventListener('load', prettyPrint, false);

            $(document).ready(function(){

                // Add prettyprint class to pre elements
                    $('pre').addClass('prettyprint');

                // Initialize tabs and pills
                    $('.note-tabs').tab();

            }); // end document.ready
        </script>

  </body>
</html>

基本的に、1人のユーザーのすべての画像を取得して表示します。彼がスクロールするときに、フェードイン効果でそれらを表示したいと思います。

ありがとう！

4

2 に答える 2

2

jQuery の Lazy Load プラグインで、画像データが表示されるまで読み込みを遅らせたいようです。プラグイン サイトには、fadeIn 効果の例があります。

于 2013-01-03T23:58:20.600 に答える
0

遅延読み込みはオプションですが、読み込みが遅くなります。もう 1 つのオプションは、jQuery inview イベントプラグインを使用することです。これにより、求めている効果が得られる可能性があります。それはまさにあなたが望むものに依存します。

jQuery inviewを使用すると、コードは次のようになります。

$(function(){
    $('img.fadeMe').css('opacity', 0).one('inview', function(event, visible) {
      if(visible) {
        $(this).fadeIn();
      }
    });
    window.trigger('scroll');//fadeIn images at top of page that are initially in view.
});

テストされていない

このアプローチでは、画像を'opacity', 0最初は非表示にするために事前にスタイル設定されているため、通常の方法で画像を読み込むことができます。したがって、各画像が読み込まれる前に遅延がゼロになる可能性が十分にあります。

Lazy Load を使用すると、画像が利用可能になる前に読み込みの遅延が保証されます。これが Lazy Load の機能です。

両方のアプローチを試して、どちらがサイトに最適かを確認してください。

于 2013-01-04T02:28:02.943 に答える