网页从其他服务器加载图片,实现网页图片的异步加载

如题。

最近在进行开发的项目中，有一个网页需要使用非常多的图片，那么必须对图片的加载做优化。使用流式加载图片的方法是绝对不行，对服务器的带宽将是非常大的考验，于是，我考虑使用图片的异步加载。

在网上寻找插件，最终让我找到一个非常牛逼的js插件。名字叫做：lazy load.项目主页如下：http://www.appelsiini.net/projects/lazyload

这个插件能够实现的效果，是在页面初次加载的时候，只加载可视窗口范围内的图片。其他区域的图片只有在当页面滑动到可视位置的时候才会加载。对于一个大页面，如果用户在该页面的停留时间不长，那么使用这种异步加载的方法会明显地降低服务器带宽的压力。

使用的方法，引入了lazy load的js库之后，在页面的任意位置，可以通过img标签，定义一个位置。

HTML：类名是不可更改的，data-original跟的是img的链接地址。

JS：

$("img.lazy").lazyload({

effect : "fadeIn"

});

当然，我们还可以设置当页面滑动至某位置，距离其滑动方向一定距离内的图片预先加载，防止页面加载的时候出现图片的位置出现了一张灰色的背景图，

在上面的js中的lazyload函数中体添加一个语句：

threshold : 200

后面的数值能够让用户自定义页面上的这段预先加载图片的距离。

当然，这个插件好像还是有一些问题，例如网上有网友提出，这个插件不仅不能减少服务器的压力，反而会增加服务器的压力。

最后附上一个大神写的图片异步加载的插件，虽然不太完美，但是对于帮助我们理解lazy load的工作原理还是有一定的帮助的。

网页从其他服务器加载图片,实现网页图片的异步加载相关推荐

java图片异步加载_使用java concurrent处理异步加载图片功能
转载:http://marshal.easymorse.com/archives/3081 java5开始,增加了concurrent api,用于并发处理.比如起多个线程并发从网络上下载图片,然后在 ...
webpack 异步加载配置文件_详解webpack异步加载业务模块
虽然把我们用到的JS文件全部打包一个可以节省请求数,但如果打包后的JS文件过大,那么也容易出现白屏现象,许多操作失灵.而且一些区域是点到才出现,那么相关的JS其实可以剥离出这个大JS文件外.这就涉及到 ...
linux服务器上网页变形,Linux服务器上用iScanner删除网页恶意代码的方法
第一步:安装首先要确保服务器上已经安装了Ruby 复制代码代码如下: #ruby -v //查看ruby的版本信息如果服务器上没有安装,可以通过yum或者apt-get安装ruby(根据自己服务器 ...
网页怎么与服务器进行连接,如何实现网页与服务器的连接
如何实现网页与服务器的连接需要进行远程文件传输的计必须安装和运行ftp客户程序.在windows操作系统的安装过程中,通常都安装了tcp/ip协议软件,其中就包含了ftp客户程序.但是该程序是字符界 ...
Python爬虫解决异步加载问题--以爬取PEXELS图片为例
第一次尝试爬取->[Python爬虫]爬虫实例:三种方式爬取PEXELS图片在爬取PEXELS时,遇到了这样问题: 页面使用Ajax的异步加载技术来实现分页,所以通过request.text无 ...
C#中PictureBox异步加载图片
C#中PictureBox异步加载图片 ??yy 2017-11-05 23:30:00 443 收藏版权 void Button1Click(object sender, EventArgs ...
在PictureBox加载图片时，显示等待，加载完毕后再显示真正的图片
void Button1Click(object sender, EventArgs e) { //图片异步加载完成后的处理事件 pictureBox1.LoadCompleted += new As ...
javascript 文件的同步加载与异步加载
原文:[转载]javascript 文件的同步加载与异步加载 HTML 4.01 的script属性 charset: 可选.指定src引入代码的字符集,大多数浏览器忽略该值. defer: bool ...
Cocos2d-x教程(36)－多线程与异步加载
欢迎加入Cocos2d-x 交流群:193411763 转载时请注明原文出处 :http://blog.csdn.net/u012945598/article/details/41312345 --- ...
python提取ajax异步加载数据_python爬取豆瓣电影分类排行榜引出的异步加载（AJAX）问题...
1.背景之前的文章中已经介绍过猫眼TOP100的电影信息爬取案例,网页每页有10条电影信息,通过翻页发现URL变化规律构造循环爬取10页100条全部电影信息.但是豆瓣电影分类排行榜的网页情况就所不同 ...

网页从其他服务器加载图片,实现网页图片的异步加载

网页从其他服务器加载图片,实现网页图片的异步加载相关推荐

最新文章

热门文章

网页 从其他服务器 加载图片,实现网页图片的异步加载

网页 从其他服务器 加载图片,实现网页图片的异步加载相关推荐

最新文章

热门文章

网页从其他服务器加载图片,实现网页图片的异步加载

网页从其他服务器加载图片,实现网页图片的异步加载相关推荐