Question

如果我加载了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>

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

谢谢！

Answer 1

听起来您希望Lazy Load plugin for jQuery延迟加载图像数据，直到它们可见为止。该插件网站有一个example with the fadeIn effect。

Answer 2

Lazy Load是一个选项，但会延迟加载。另一种选择是使用jQuery inview event插件，这可能会更好地提供您所寻求的效果。这取决于你想要什么。

使用 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所做的事情。

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

加载图像时如何使淡入效果（当我滚动时）

2 个答案: