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>

基本上，我检索一个用户的所有图像并显示它们。当他滚动时，我想向他们展示淡入淡出的效果。

谢谢！

4

2 回答 2

2

It sounds like you want the Lazy Load plugin for jQuery to delay the loading of image data until they are visible. The plugin site has an example with the fadeIn effect.

于 2013-01-03T23:58:20.600 回答
0

延迟加载是一种选择，但这会延迟加载。另一种选择是使用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以使它们最初不可见。因此，在每个图像被加载之前，它很有可能在它进入视野时淡入之前实现零延迟。

使用延迟加载，您可以保证在图像可用之前加载延迟 - 这就是延迟加载所做的。

尝试这两种方法，看看哪种方法最适合您的网站。

于 2013-01-04T02:28:02.943 回答