html图片按顺序加载,jQuery 实现图片的依次加载图片功能

今天药忘吃喽~ 2022-10-06 07:52 295阅读 0赞

css代码：

ul\#portfolio\{margin:0;padding:0;\}

ul\#portfolio li\{float: left;margin:0 5px 0 0;width:250px;height: 250px;list-style: none;\}

ul\#portfolio li.loading\{background: url(../images/spinner.gif) no-repeat center center;\}

ul\#portfolio li img\{width:250px;height: 250px;display: block;\}

js代码：

$(function()\{

var images=new Array();

images\[0\]='./images/ads\_one.jpg';

images\[1\]='./images/ads\_two.jpg';

images\[2\]='./images/ads\_three.jpg';

//获取了图像的数量

var max=$(images).length;

//如果包含一张以上的图像，那么创建对应的UL元素家人到wrapper div中，并且调用LoadImage方法。

if(max>0)\{

//create the UL element

var ul=$('

//append to div\#wrapper

$(ul).appendTo($('\#wrapper'));

//load the first image

LoadImage(0,max);

\}

//在LoadImage方法中，循环遍历所有的图像，对每个图像创建li元素

function LoadImage(index,max)\{

if(index

//利用attr方法为li元素增加了css样式，即加上了loading的gif背景。

var list=$('

').attr('class','loading');

//把li添加到ul元素中

$('ul\#portfolio').append(list);

//获取当前的li元素

var curr=$("ul\#portfolio li\#portfolio\_"+index);

//创建图像元素

var img=new Image();

//加载图像

$(img).load(function()\{

$(this).css('display','none');

$(curr).removeClass('loading').append(this);

$(this).fadeIn('slow',function()\{

//采用回调函数的方法，在当前元素成功执行fadeIn方法之后 再去调用下一个元素的LoadImage方法，这样就能实现多个图像的顺序加载了。

LoadImage(index+1,max);

\});

\}).error(function()\{

$(curr).remove();

LoadImage(index+1,max);

\}).attr('src',images\[index\]);

\}

\}

\})

以上所述是小编给大家介绍的jQuery 实现图片的依次加载图片，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！

发表评论取消回复

表情：

评论列表（有 0 条评论，295人围观）

还没有评论，来说两句吧...

相关阅读

相关 JS 实现图片延迟加载（懒加载）

实现原理 1. 结构中，我们使用一个盒子包裹着图片（图片不显示的时候，可以先占据着这个位置，并且设置默认背景图或背景颜色） 2. 最开始，img 的 src 设置默认

客官°小女子只卖身不卖艺/ 2022年12月29日 06:43/ 0 赞/ 772 阅读

相关 html图片按顺序加载,jQuery 实现图片的依次加载图片功能

css代码： ul\portfolio\{margin:0;padding:0;\} ul\portfolio li\{float: left;margin:0 5px 0

今天药忘吃喽~/ 2022年10月06日 07:52/ 0 赞/ 296 阅读

相关实现图片的异步加载

图片异步加载功能是现在web中非常常见的一个针对web做优化的方法。尤其是在移动端，面对大量的图片列表的时候，如果没有做相应的优化，会直接导致页面滑动和加载的卡顿，而

短命女/ 2022年09月27日 06:43/ 0 赞/ 349 阅读

相关 Jquery 实现图片延迟加载

网上的那个Jquery的插件不好用,你试过就知道. 无奈,自己写了一段代码 $(function()\{ var CPos=func

た入场券/ 2022年09月20日 08:31/ 0 赞/ 1113 阅读

相关 html如何加载图片

HTML 5 <img> 标签定义和用法 <img> 标签定义图像。 HTML 4.01 与 HTML 5 之间的差异在 HTML 4.01 中，图像的

旧城等待，/ 2022年09月17日 05:27/ 0 赞/ 285 阅读

相关图片懒加载的实现

\\1. 布局元素必须有宽高 \\2. 将图片地址存储在img的自定义属性(\_src)上 \\3. 如果img进入页面将自定义属性的地址赋值给 src 属性

àì夳堔傛蜴生んèń/ 2022年09月14日 09:20/ 0 赞/ 421 阅读

相关图片预加载与图片懒加载（缓载）的区别与实现

预加载与懒加载，我们经常经常用到，这些技术不仅仅限于图片加载，我们今天讨论的是图片加载：一、什么是图片预加载与懒加载：图片预加载：顾名思义，图片预加载就是

我不是女神ヾ/ 2022年08月18日 14:10/ 0 赞/ 344 阅读

相关图片加载

[Android四大图片缓存（Imageloader,Picasso,Glide,Fresco）原理、特性对比][Android_Imageloader_Picasso_Gl

川长思鸟来/ 2022年06月08日 07:30/ 0 赞/ 442 阅读

相关 vue + 图片加载 + 默认图片

需求：图片数据未返回 + 图片数据返回为空 + 图片加载出错时，图片采用默认图片展示。解决：先判断返回数据是否有，再通过img 的 load事件判断是否加载完成

╰+哭是因爲堅強的太久メ/ 2022年03月10日 18:20/ 0 赞/ 574 阅读

相关图片懒加载实现

现在网站页面内容越来越丰富，图片内容也越来越多，而图片过多会导致网页文件过大，从而引发加载缓慢的问题，而图片懒加载就是为解决这一问题而生。首先我们来讲Jquery的懒加载控

我会带着你远行/ 2021年09月20日 09:08/ 0 赞/ 827 阅读