浅谈tudou土豆网首页图片延迟加载的效果

这样做的好处当然是如果有用户不需要查看下面的内容，则免去了下面所有图片的请求，这对减少服务器的压力还是很有帮助的。
实现:
其实tudou的实现原理很简单，
1.先把所有需要延迟加载的图片的src都设置成同1个小图片的连接(sprite.gif)，把真真图片的连接放进图片的alt属性中，look下代码：


代码如下:

<a class="inner" target="new" title="史上最重街舞选手和最柔软街舞选手" href="http://www.tudou.com/programs/view/Utmt1_6Z-lU/">
<img width="120" height="90" class="pack_clipImg lazyImg" alt="http://i01.img.tudou.com/data/imgs/i/051/720/095/p.jpg" src="http://css.tudouui.com/skin/__g/img/sprite.gif" coords="_DAA"/>
</a>

2. 绑定window.scroll事件，在该事件里面的重设所有class为lazyImg的图片的src值，在土豆首页找到如下JS:


代码如下:

var o=function(){
var s=TUI.pos.scrollTop(),q=c;
if(q.box[0]){
var r=q.box.offset().top;
if(r-s>0&&r-TUI.pos.windowHeight()<s){
q.init()
}else{
q.stop()
}
}
if(!h||s<590){return true}
TUI.widget.quickPlaylist.load();
h=false
};
o();
$(window).bind("scroll",o);

我没有去跟入查看TUI.widget.quickPlaylist.load()方法的实现，tudou的JS都是压缩混淆的，看起来挺累，不过大家知道原理就可以了。
实例：
上面说了那么多，最后还是来个实例比较实际点，毕竟眼见为实嘛。


代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
</head>
<body>
能看的见到图片：<img src="http://at-img4.tdimg.com/board/2010/5/tylc-115X55.jpg"/>

<div id="lazyBox" style="margin-top:100px;">
一开始看不到的图片：
<img width="120" height="90" style="border:1px solid blue;" class="lazyImg" alt="http://i01.img.tudou.com/data/imgs/i/051/720/095/p.jpg" src="http://css.tudouui.com/skin/__g/img/sprite.gif" coords="_DAA"/>
<img width="120" height="90" style="border:1px solid blue;" class="lazyImg" alt="http://i01.img.tudou.com/data/imgs/i/051/871/396/m20.jpg" src="http://css.tudouui.com/skin/__g/img/sprite.gif" coords="_DBA"/>
</div>
<div style="height:1000px;">
 
</div>
<script type="text/javascript">
var hasShow = false;
$(window).bind("scroll",function(){
if(hasShow==true){
$(window).unbind("scroll");
return;
}
var t = $(document).scrollTop();
if(t>50){
// 滚动高度超过50，加载图片
hasShow = true;
$("#lazyBox .lazyImg").each(function(){
$(this).attr("src",$(this).attr("alt"));
});
}
});
</script>
</body>
</html>

把上面代码copy到本地运行下就可以看到效果了。

赞 (0)

相关推荐

  • jquery 插件实现图片延迟加载效果代码

    减少了页面加载的时间了,也减轻了服务器的压力,看了一下javascript源码,里面写的了lazyload,我就百度了一下,找到了一个jquery的实现这种效果的插件:jquery.lazyload,一个很不错的插件. 比如你打开一个比较大或者长的网页,那么Lazy load能够实现先加载您所看到区域的图片,等你滚动到哪里,就加载那里的图片. 如果你是图片网站,而且一个页面要加载很多图片,这个插件是个很不错的选择. 如何使用,引用如下js: 查看源代码打印帮助 复制代码 代码如下: <scrip

  • 图片延迟加载的实现代码(模仿懒惰)

    加到页面head标签即可! 复制代码 代码如下: <script type="text/javascript" src="http://plwcommon.hywlm.com/PLWCommonJs/lazyload/jquery.lazyload.js"></script> <script type="text/javascript"> jQuery(document).ready( function($){

  • 原生Js页面滚动延迟加载图片实现原理及过程

    原理和过程 1.页面滚动加载事件 2.获取元素在页面里的top值 根据滚动条的位置 判断何时显示图片 3.获取元素集合 加载过的图片从集合里删除 效果预览:http://jsfiddle.net/dtdxrk/SkYNq/embedded/result/ 复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html

  • jquery图片延迟加载 前端开发技能必备系列

    目前,主要的购物网站都采用了这种加载方式.今天在一个网友的站里发现一个图片延迟加载的插件,很好用,在这里介绍一下. 先介绍一下图片延迟加载原理.我们需要先将图片的真实地址保存在一个自定义的属性中(属性名任你发挥吧,这里我用的是lazy-src),而图片的src属性中用一个占位图片来替代,这个占位图片当然是越小越好,它基本上只干活.不露面. 复制代码 代码如下: <img src="images/placeholder.png" lazy-src="images/real

  • js图片延迟加载的实现方法及思路

    大概的实现方式是:在页面的load没有触发之前,把所有的指定id的元素内的img放入到imgs中,将所有的图片的src值放入到一个新建的_src属性中,把src设置为指定的显示图片.然后,在document.body的scroll事件触发时,循环计算imgs中的img元素位置是否正好在浏览器显示框范围内,如果是,则将img元素的_src属性的值赋给src,这样图片就能显示出来.这里比较麻烦地方是,如何计算img的位置,获得元素的相对于页面的绝对位置.通常是用offsetLeft和offsetTo

  • 浅谈tudou土豆网首页图片延迟加载的效果

    这样做的好处当然是如果有用户不需要查看下面的内容,则免去了下面所有图片的请求,这对减少服务器的压力还是很有帮助的. 实现: 其实tudou的实现原理很简单, 1.先把所有需要延迟加载的图片的src都设置成同1个小图片的连接(sprite.gif),把真真图片的连接放进图片的alt属性中,look下代码: 复制代码 代码如下: <a class="inner" target="new" title="史上最重街舞选手和最柔软街舞选手" hre

  • 浅谈tensorflow中Dataset图片的批量读取及维度的操作详解

    三维的读取图片(w, h, c): import tensorflow as tf import glob import os def _parse_function(filename): # print(filename) image_string = tf.read_file(filename) image_decoded = tf.image.decode_image(image_string) # (375, 500, 3) image_resized = tf.image.resize

  • 浅谈tensorflow 中的图片读取和裁剪方式

    一 方式1: skimage from skimage import data, io, transform, color import matplotlib.pyplot as plt # io.imread 读出的图片格式是uint8,value是numpy array 类型. image = data.coffee() image = io.imread(dir) plt.imshow(image) plt.show() io.save('1.jpg',image) #保存图像 image

  • jQuery实现首页图片淡入淡出效果的方法

    jQuery实现首页图片淡入淡出效果的方法

    本文实例讲述了jQuery实现首页图片淡入淡出效果的方法.分享给大家供大家参考.具体分析如下: 这里演示当当网的品牌店铺首页效果,演示地址为:http://static.dangdang.com/gm/topic/2270_181320.shtml 效果图如下所示: 需求: 1. 绿色区域要求在图片上方,半透明显示 2. 当鼠标移动到红色区域,切换相应的图片 3. 首页的三张大图轮转 HTML: <div id="carousel"> <div id="ca

  • 浅谈vue中使用图片懒加载vue-lazyload插件详细指南

    在vue中使用图片懒加载详细指南,分享给大家.具体如下: 说明 当网络请求比较慢的时候,提前给这张图片添加一个像素比较低的占位图片,不至于堆叠在一块,或显示大片空白,让用户体验更好一点. 使用方式 使用vue的 vue-lazyload 插件 插件地址:https://www.npmjs.com/package/vue-lazyload 案例 demo: 懒加载案例demo Installation 安装方式 npm $ npm i vue-lazyload -D CDN CDN: https:

  • 浅谈关于PHP解决图片无损压缩的问题

    本文介绍了关于PHP解决图片无损压缩的问题,分享给大家,具体如下: 代码如下: header("Content-type: image/jpeg"); $file = "111.jpg"; $percent = 1.5; //图片压缩比 list($width, $height) = getimagesize($file); //获取原图尺寸 //缩放尺寸 $newwidth = $width * $percent; $newheight = $height * $

  • 浅谈Python3识别判断图片主要颜色并和颜色库进行对比的方法

    [更新]主要提供两种方案: 方案一:(参考网上代码,感觉实用性不是很强)使用PIL截取图像,然后将RGB转为HSV进行判断,统计判断颜色,最后输出RGB值 方案二:使用opencv库函数进行处理.(效果不错) 1.将图片颜色转为hsv, 2.使用cv2.inRange()函数进行背景颜色过滤 3.将过滤后的颜色进行二值化处理 4.进行形态学腐蚀膨胀,cv2.dilate() 5.统计白色区域面积 详解:方案一: 转载出处:www.jb51.net/article/62526.htm 项目实际需要

  • vue-lazyload图片延迟加载插件的实例讲解

    1.首先在npm上下载vue-lazyload的引用包 npm install vue-lazyload --save-dev 2.然后我们在main.js里面import这个包,当然,单单这一个包是不够的,还得其他的文件 import Vue from 'vue'; import App from './App.vue' import router from './router'; import VueLazyload from "vue-lazyload" 3.然后我们配置vue-

  • js制作网站首页图片轮播特效代码

    本文实例为大家分享了使用js制作一般网站首页图片轮播效果的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>图片轮播</title> <style> .warp{ width: 600px; height: 750px; position: relative;

随机推荐