建站资讯News

图片动态加载技术应用及jquery.lazyload插件使用实例

0
一佰互联网站建设(www.yinxi.net) 发布时间:2019-04-22 10:09:50 浏览数: 57
应用实例小站 http://www.uhuigou.net
图片动态加载不算什么新东西了,很多大站都在用,优势很明显,主要是节省流量(包括服务器和客户端),给用户的体验也要好些,可以提高页面的打开速度.
原理也不复杂,图片还是用原来的img标签,src指向一个默认的小图,比如loading之类,然后自定义一个img的属性保存真正的图片地址,当用户访问到这个图片位置的时候,通过js控制把src的值改成自定义属性的值.

这个功能现在被做成了很多插件.我用的叫 jquery.lazyload ,需要的到我的站上直接下载吧,只需要这一个文件就够了,当然你还得有jqeruy
使用方法也很简单,原来的img标签加一个 data-original 属性保存真实的图片地址,例子如下 复制代码代码如下:
<img class="lazy" src="http://bcs.duapp.com/uhuigou/loading.gif" data-original="http://bcs.duapp.com/uhuigou/201306200831326313.jpg" style="width: 100%; display: inline-block;">

需要动态加载的img都这么写就可以了, jquery.lazyload 只认data-original,style或者其他属性根据需要随便写
最后还要在页面的jquery.ready事件中初始化一下 复制代码代码如下:
$(function() {$("img.lazy").lazyload();});

好了大功告成!
一佰互联是全国知名建站品牌服务商,我们有九年网站建设、网站制作、网页设计、php开发和域名注册及虚拟主机服务经验,提供的自助建站服务更是全国有名。近年来还整合团队优势自主开发了可视化多用户”巅云建站系统“3.0平台版,拖拽排版网站制作设计,轻松实现pc站、手机微网站、小程序、APP一体化全网营销网站建设 ,已成功的为全国上百家网络公司提供自助建站平台搭建服务。

上一篇:对CSS选择器权重的认识(亲测)
下一篇: 导入css文件使用判断条件实现
[返回新闻列表]

相关新闻more

30
04月
php数组函数序列之ksort()对数组的元

ksort()定义和用法 ksort() 函数按照键名对数组升序排序,为数组值保留原来的键。 可选的第二个参数包含附加的排序标志。 若成功,... >>详情

06
05月
网站设计—如何蹭热度写出文案?

蹭热点是为了什么呢?很多人会说,蹭热点为了传播,获得更多阅读量、转发率。只要蹭上热点,传播内容就会在很大机率上得到转发,或者是媒体报道... >>详情

27
03月
引爆抖音短视频的运营方案和技巧

简介:引爆抖音运营方案需要哪些技巧呢?1.抖音定位2.技术应用3.热门行业4.营销趋势5.抖音要素(5个参数)1)视频标题和视频封面2)视频... >>详情

08
05月
企业如何建网站如何推广与网络营销

网站建设公司巅云建站:企业管理信息化,是现代企业发展的必由之路,企业管理的信息化发展也必然以电子商务为目标。而商务的电子化最基础的环节是企业... >>详情

高端网站建设

美工兼顾SEO,为企业电子商务营销助力!

电话:

023-85725751
建站

产品

域名注册 虚拟主机 云服务器 企业邮局
智能建站 APP打包 微站/小程序 创业平台
网站推广 媒体营销 智能采集 AI机器人
400电话 短信营销 店销机器人
私人定制 门户网站