如果我加载 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>
基本上，我检索一个用户的所有图像并显示它们。我想在他滚动时向他们展示淡入淡出效果。
谢谢!
最佳答案
听起来您想要 Lazy Load plugin for jQuery延迟图像数据的加载，直到它们可见。该插件网站有一个 example with the fadeIn effect .
关于php - 如何在加载图像时(滚动时)实现淡入淡出效果，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/14149166/