延时加载图片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css3</title>
<style type="text/css">
*{
    margin:0;
    padding: 0;
}
ul,li{
    list-style: outside none none;
}
.box{
    width: 600px;
    margin: 0 auto;
}
.box li{
    margin: 40px 0;
    width: 100%;
    height: 170px;
    background: #ddd;
}
.box li img{
    width: 100%;
}
</style>
</head>
<body>
<div class="box">
    <ul>
        <li><img x-src="img/1.jpg" alt=""></li>
        <li><img x-src="img/2.jpg" alt=""></li>
        <li><img x-src="img/3.jpg" alt=""></li>
        <li><img x-src="img/4.jpg" alt=""></li>
        <li><img x-src="img/5.jpg" alt=""></li>
        <li><img x-src="img/1.jpg" alt=""></li>
        <li><img x-src="img/2.jpg" alt=""></li>
        <li><img x-src="img/3.jpg" alt=""></li>
        <li><img x-src="img/4.jpg" alt=""></li>
        <li><img x-src="img/5.jpg" alt=""></li>
        <li><img x-src="img/1.jpg" alt=""></li>
        <li><img x-src="img/2.jpg" alt=""></li>
        <li><img x-src="img/3.jpg" alt=""></li>
        <li><img x-src="img/4.jpg" alt=""></li>
        <li><img x-src="img/5.jpg" alt=""></li>
        <li><img x-src="img/1.jpg" alt=""></li>
        <li><img x-src="img/2.jpg" alt=""></li>
        <li><img x-src="img/3.jpg" alt=""></li>
        <li><img x-src="img/4.jpg" alt=""></li>
        <li><img x-src="img/5.jpg" alt=""></li>
        <li><img x-src="img/1.jpg" alt=""></li>
        <li><img x-src="img/2.jpg" alt=""></li>
        <li><img x-src="img/3.jpg" alt=""></li>
        <li><img x-src="img/4.jpg" alt=""></li>
        <li><img x-src="img/5.jpg" alt=""></li>
    </ul>
</div>

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">
    $(function(){
        function showImg(){
            $(‘img‘).each(function(index,ele){
                if($(this).offset().top<$(window).height()+$(window).scrollTop()){
                    var oSrc = $(this).attr(‘x-src‘);
                    $(this).attr(‘src‘,oSrc);
                }
            })
        }
        showImg();
        $(window).scroll(function(){
            showImg();
        });
    });
</script>
</body>
</html>
时间: 2024-10-03 03:48:01

延时加载图片的相关文章

Image Lazy Load:那些延时加载图片的开源插件(jQuery)

图片延时加载技术对大流量的网站来说是十分实用的.目前图片在网站中大量使用,如果不加处理的话会对服务器和带宽造成级大压力,通过只渲染当前用户可见区域的图片,可以极大地减少网站的请求数,降低网络带宽资源. unveil 这是一款十分轻量级的片时图片加载组件 支持现代浏览器及IE7+, Github上面有将近3K个star(关注) 使用 一般图片 <img src="bg.png" data-src="img1.jpg" /> 对于支持 retina (视网膜

IOS延时加载网络图片

    重网上下载图片是很慢的,为了不影响体验,选择延时加载图片是很好的办法. 一个tableView 列表,左边暂时没有图 - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath*)indexPath { static NSString *CellIdentifier = @"myCell"; UITableViewCell *cell = [tableVie

图片延时加载技术

同步延时加载页面延迟加载,即分屏显示,用户滚动页面,切换页面时显示当前屏幕的图片 原理:将img的地址暂时存在一个属性中,如data-original,而让src为空,等到鼠标滚动的时候,响应一个事件($(this).trigger('appear');),此时会把data-original中的地址取出来,放入src 1:引入jquery.lazyload.js,该js最好放在页面的最下面 2:给img添加延迟属性 如: <img class="lazy" src="/

IOS开发中如何解决TableView中图片延时加载

经常我们会用tableView显示很多条目, 有时候需要显示图片, 但是一次从服务器上取来所有图片对用户来浪费流量, 对服务器也是负担.最好是按需加载,即当该用户要浏览该条目时再去加载它的图片. - (void)tableView:(UITableView *)tableView willDisplayCell:(UITableViewCell *)cell forRowAtIndexPath:(NSIndexPath *)indexPath { UIImage *image = [self g

jquery实现的图片延时加载插件

jquery实现的图片延时加载插件: 在很多网站尤其是图片站,都采用了图片延时加载效果,这样可以有效的减轻服务器的压力,有点自然不言而喻了,下面就和大家分享一个图片延时加载的插件,希望能够给大家带来一定的帮助. 代码如下: <script type="text/javascript"> (function( $ ){ $.fn.imglazyload=function( options ) { var o=$.extend({ attr:'lazy-src', contai

jquery实现图片延时加载[转]

本文转自:http://www.cnblogs.com/wscdzl/archive/2012/09/03/2668838.html 原理: 通过 jQuery 插件 lazyload 使得在浏览器可见区域外的图片不会被加载,当图片被用户滚动到浏览器可见区域时图片才进行加载,有点类似使用 Google 搜索图片时的效果.很明显,通过使用图片延时加载可以提高页面的加载速度. 实现过程: 首先是引入jquery文件和插件文件.jquery文件在这里我就不再赘述了.下面我贴出插件文件,我们将该文件命名

图片延时加载例子详解

有时候由于图片太大,我们需要一个友好的提示,提示用户图片正在加载中,那么以下通过引入jquery就能轻而易举的实现. demo下载地址:http://download.csdn.net/download/tjcyjd/8475549 其中需要3个js:jquery.min1.7.1.js.jquery.lazyload.js.image.lazyload.js 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//

通过js实现简单的图片延时加载

1.将要延迟加载的图片src属性全部改成thissrc 比如<img src="./top_img.jpg" />改成<img thissrc="./top_img.jpg" /> <div class="topic-list"> <img thissrc="1.png" width="180" height="180" /> <im

jquery插件之lazyload图片延时加载功能

公司投票程序,页面图片较多,导致页面显示很慢,做的图片延时加载: 代码: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta charset="utf-8"> <title>demo</title> </