ImagesLazyLoad图片延迟加载效果

之前在做一个图片浏览效果时，要看后面的小图必须等到前面的加载完，而且 大图的位置是在大量的小图后面，导致大图要等到小图都加载完才能显示，为了 解决这个问题，就想到了Lazyload效果。

现在很多网站都用了类似的效果，如淘宝、Bing等。

这个图片延迟加载效果是在Lazyload的基础上扩展的，主要扩展了获取img元 素，获取src和图片加载的部分。

兼容：ie6/7/8, firefox 3.5.5, opera 10.10, safari 4.0.4, chrome 3.0

其中safari和chrome部分功能不支持。

效果预览

时间： 2024-09-11 15:52:29

ImagesLazyLoad图片延迟加载效果的相关文章

ImagesLazyLoad 图片延迟加载效果

1.导入JS插件  <script src="jQuery.js" type="text/JavaScript"></script>  <script src="jquery.lazyload.js" type="text/javascript"></script>  2.在你的页面中加入如下的javascript Java代码   $("img").lazy

jquery图片延迟加载效果实现方法

首先是加载空字符串的问题,如果给img的src设为空字符串的话,可能会得到意料之外的结果.例如在 http://xxx/test.htm 里面的 <img src=""> 会发生以下情况:ie 会产生相对地址的请求,即:http://xxx/Safari/Chrome 会产生当前页面地址的请求,即:http://xxx/test.htmOpera/Firefox 不会产生请求 实例  代码如下 复制代码 <img src="grey.gif" or

jQuery实现鼠标滚动图片延迟加载效果附源码下载_jquery

这里延迟加载的意思是,拖动滚动条时,在图片出现在浏览器显示区域后才加载显示.在这之前全部图片都由一张图片代替.节省流量,减轻服务器负担. 请用鼠标或者键盘方向键使页面向下滚动,注意图片的变化.本特效没有使用专门的图片延迟加载插件,只需要一小段jQuery代码就实现了图片延迟加载,使用非常方便.在本文后面附有源码下载. 效果展示       源码下载 用到的加载中的图片: 代码如下: <!DOCTYPE html> <html> <head> <meta chars

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

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

Lazyload 延迟加载效果

Lazyload是通过延迟加载来实现按需加载,达到节省资源,加快浏览速度的目的. 网上也有不少类似的效果,这个Lazyload主要特点是: 支持使用window(窗口)或元素作为容器对象: 对静态(位置大小不变)元素做了大量的优化: 支持垂直.水平或同时两个方向的延迟.  由于内容比较多,下一篇再介绍图片延迟加载效果.  兼容:ie6/7/8, firefox 3.5.5, opera 10.10, safari 4.0.4, chrome 3.0   程序说明 [基本原理] 首先要有一个容器对

ImageZoom 图片放大效果（扩展篇）

上一篇ImageZoom 已经对图片放大效果做了详细的分析,这次在ImageZoom的基础上进行扩展,实现更多的效果. 主要扩展了原图和显示框的展示模式,有以下几种模式: "follow" 跟随模式:显示框能跟随鼠标移动的效果: "handle" 拖柄模式:原图上有一个拖柄来标记显示范围: "cropper" 切割模式:原图用不透明的来标记显示范围,其他部分用半透明显示: "handle-cropper" 拖柄切割模式:拖柄模

网页图片延迟加载技术

  在手机网站上利用图片延迟加载技术,达到加快网页的加载速度. 这是我要实现的目的,毕竟手机页面小,加载速度一定要快,但又不想一个图片一页,让用户体验性差. 下面说下实现的过程. 网上下载了很多的版本,很多都不能用,几个版本比较,加上改进,我这个版本总算成行,分享给大家. 网上有很多版本的js,比较复杂,我这里用的是jQuery,更加的方便和快捷. 首先要下载jQuery的程序包,我在网页下面已经提供修改过的,绝对的可用. 适应各个版本的浏览器,还有手机浏览器 第二步,将下载的文件解压放到一个j

ImageZoom 图片放大镜效果（多功能扩展篇）_javascript技巧

主要扩展了原图和显示框的展示模式,有以下几种模式: "follow" 跟随模式:显示框能跟随鼠标移动的效果: "handle" 拖柄模式:原图上有一个拖柄来标记显示范围: "cropper" 切割模式:原图用不透明的来标记显示范围,其他部分用半透明显示: "handle-cropper" 拖柄切割模式:拖柄模式和切割模式的混合版,同时用透明度和拖柄来标记显示范围. 当然更多的扩展等待你的想象力来发掘. 兼容:ie6/7/8,

前端图片延迟加载详细讲解

显示在浏览器可视区域的图片总是不能及时的刷出来,让在可视区域的图片立即加载进来,而让不在可视区域并且需要通过滚动条进行滚动显示的图片在图片滚动到可视区域内再显示出来       原本是打算昨天昨天下午的时候就写一篇关于前端图片延迟加载的详细技术的博客的,没想到下午公司项目出现了一些问题,所以一直在改代码进行调试,今天 白天一整天又在外面跑,回来已经傍晚了,刚吃完饭,就想着赶紧补上,这样很多不懂这方面具体实现的小伙伴们也能早点学习经验. 前端页面的用户体验对于一个网站来说是至关重要的,我们在访问一