您的位置：首页 > Web前端 > JQuery

Jquery插件实现图片延迟加载

2013-11-11 15:13 573 查看

##########################################################

<script src='jquery.js'></script>

<script src='jquery.lazyload.js'></script>

<script>

    $(function(){

        $("img").lazyload({

            effect:"fadeIn"    ,    //效果，参考jquery手册效果设置

            threshold:-200    ,    //设置临界值。距离图片多少像素显示图片

        })

    })

</script>

<img src='1.jpg' height='300'><br>

<img src='2.jpg' height='300'><br>

<img src='3.jpg' height='300'><br>

<img src='4.jpg' height='300'><br>

<img src='5.jpg' height='300'><br>

<img src='6.jpg' height='300'><br>

### 其实这样基本满足需求了，但是这样并不会减轻服务器压力，因为图片也是页面载入就加载了。

### php处理一下

##########################################################

<?php

    ob_start();

?>

<html>



<script src='jquery.js'></script>

<script src='jquery.lazyload.js'></script>

<script>

    $(function(){

        $("img").lazyload({

            effect:"fadeIn"    ,    //效果，参考jquery手册效果设置

            threshold:-200    ,    //设置临界值。距离图片多少像素显示图片

        })

    })
</script>

<img src='1.jpg' data-original='1.jpg' height='300'><br>

<img src='1.jpg' data-original='2.jpg' height='300'><br>

<img src='1.jpg' data-original='3.jpg' height='300'><br>

<img src='1.jpg' data-original='4.jpg' height='300'><br>

<img src='1.jpg' data-original='5.jpg' height='300'><br>

<img src='1.jpg' data-original='6.jpg' height='300'><br>

<?php

$echo=ob_get_contents();

ob_clean();

$preg="/<img(.*?)src(.*?) data-original(.*?)>/i";

$replaced="<img\\1 src\\3 data-original\\2>";

echo "<script>alert('Start')</script>";

print preg_replace($preg,$replaced,$echo);    //将替换后的内容写到缓存

ob_end_flush();

?>

原文地址：http://www.rainleaves.com/html/1248.html

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： jquery插件 jquery 缓存 jquery.lazyload.js

相关文章推荐

新的分享

章节导航