javascript图片什么时候加载 javascript图片预加载和延时加载的区别

本篇文章给大家谈谈javascript图片什么时候加载，以及javascript图片预加载和延时加载的区别对应的知识点，文章可能有点长，但是希望大家可以阅读完，增长自己的知识，最重要的是希望对各位有所帮助，可以解决了您的问题，不要忘了收藏本站喔。

如何用javascript实现整个网页的图片分段加载

写了一下jQuery的。Javascript只是要多些几个函数来获取元素相对页面的offset，这个问题(536001082)里面有。

大致思路：documentready-替换图片的src-加载当前可见图片-当鼠标滑轮操作时加载可见区域内图片。

在IE，Firefox，Chrome，Safari下测试都没问题。Opera不加载，还没调试，随它去吧、、、

下面的代码只是大概框架，具体还要根据个人需求调整。建议使用网上写好的插件，考虑到的方面比较全。

img{display: block; border: 1px solid#f00; margin-bottom: 400px;}

<!--在网上找几张尺寸较大图片，更换地址-->

<!--还需要一张 loading.gif，和 html文件放在一起-->

<div id="gallery">

<img src="1.jpg"/>

<img src="2.jpg"/>

<img src="3.jpg"/>

<img src="4.jpg"/>

<img src="5.jpg"/>

<img src="6.jpg"/>

</div>

<script type="text/javascript" src="jquery.js"></script>

<script type="text/javascript">

$(function(){

function load_images(){

//延时 0.1秒再执行函数

//如果立即执行，Firefox会返回错误的 offset().top

setTimeout(function(){

//检查每一个图片

$("#gallery img").each(function(){

var self=$(this);

//确认图片在可视范围之内

var _ot=$(this).offset().top,

_st=$(document).scrollTop();

if(_ot- _st> 0&& _ot- _st<$(window).height()){

//创建新的 img对象

var img= new Image();

//图片加载成功

img.onload= function(){

//还原 width和 height

if(self.attr("data-width")){

self.attr({

"width": self.attr("data-width")

});

}

else{

self.removeAttr("width");

}

//没有用户自定义 width和 height属性，移除

if(self.attr("data-height")){

self.attr({

"height": self.attr("data-height")

});

}

else{

self.removeAttr("height");

}

//更改图片 src

self.attr("src", self.attr("data-src"));

//释放

img= null;

};

img.onerror= function(){

//alert("图片加载失败");

//释放

img= null;

};

//开始加载图片

img.src= self.attr("data-src");

}

});

}, 100);

}

//只对#gallery内的 img进行缓载

$("#gallery img").each(function(){

$(this).attr({

//保存原属性

"data-src":$(this).attr("src"),

"data-width":$(this).attr("width")||"",

"data-height":$(this).attr("height")||"",

//将 src换为加载图片，并设置宽度和高度

"src":"loading.gif",

"width": 64,

"height": 64,

});

});

//页面加载的时候开始加载可视图片

load_images();

//当鼠标滑轮滚动时

var timeout_loading_images= null;

$(document).on("scroll", function(){

//如果用户还在进行滑轮滚动，不要试图加载

clearTimeout(timeout_loading_images);

//滑轮滚动停止一秒后开始加载

timeout_loading_images= setTimeout(function(){

load_images();

}, 1000);

});

});

</script>

javascript加载图片查看具体某一点RGB值

必须浏览器要支持Canvas才可以。

html中需要有一个canvas

<canvasid="canvas">对不你，你的浏览器不支持Canvas</canvas>

js代码：

varctxt=canvas.getContext('2d');

varimg=newImage;

img.onload=function(){

ctxt.drawImage(img,0,0);

vardata=ctxt.getImageData(0,0,img.width,img.height).data;//读取整张图片的像素。

console.log(data,data.toString());

}

img.src='img/pic.jpg';//src也可以是从文件选择控件中取得。

然后获取像素的某点颜色值。

vardata=ctxt.getImageData(0,0,480,480).data;

for(vari=0,len=data.length;i<len;i+=4){

varred=data[i],//红色色深

green=data[i+1],//绿色色深

blue=data[i+2],//蓝色色深

alpha=data[i+3];//透明度

//因此RGB颜色就是(red,green,blue,alpha)

}

上面所说的img.src是通过一个相对路径比如“img/pic.jpg"指定的，但是如果你的相片不是在网络上，而是想用户自己在本机上选择的怎么办？其实也是可以的。

比如你有一个<input id="" type="file"/>的上传控件selector，用户选择好文件以后。

你就可以取得这个selector.files这个对象列表了。

假定我们已经取得了这个files列表，并且files中只有一个合法的图片文件。代码如下：

varreader=newFileReader();

//绑定load事件自动回调函数

reader.onload=function(e){

varsrc=e.target.result;

//然后我们image.src就可以指向这个src了。

image.src=src;

//然后进行上面的各种处理。

};

//读取文件内容

reader.readAsDataURL(files[0]);

javascript图片预加载和延时加载的区别

javascript图片预加载和延时加载的区别主要体现在图片传输到客户端的时机上，都是为了提升用户体验的,延时加载又叫懒加载。

两种技术的本质：两者的行为是相反的，一个是提前加载，一个是迟缓甚至不加载。懒加载对服务器前端有一定的缓解压力作用，预加载则会增加服务器前端压力。

预加载：提前加载图片，当用户需要查看时可直接从本地缓存中渲染。

实现方式：可以用CSS(background)、JS(Image)、HTML(<img/>)都可以。常用的是new Image();设置其src来实现预载，再使用onload方法回调预载完成事件。只要浏览器把图片下载到本地，同样的src就会使用缓存，这是最基本也是最实用的预载方法。当Image下载完图片头后，会得到宽和高，因此可以在预载前得到图片的大小(方法是用记时器轮循宽高变化)。

懒加载：主要目的是作为服务器前端的优化，减少请求数或延迟请求数，一些图片非常多的网站中非常有用，在浏览器可视区域外的图片不会被载入，直到用户将页面滚动到它们所在的位置才加载，这样对于含有很多图片的比较长的网页来说，可以加载的更快，并且还能节省服务器带宽。，实现方式：

1.第一种是纯粹的延迟加载，使用setTimeOut或setInterval进行加载延迟.

2.第二种是条件加载，符合某些条件，或触发了某些事件才开始异步下载。

3.jQuery插件中也有插件来实现该功能。

4.第三种是可视区加载，即仅加载用户可以看到的区域，这个主要由监控滚动条来实现，一般会在距用户看到某图片前一定距离遍开始加载，这样能保证用户拉下时正好能看到图片。

预加载核心代码参考：

document.getElementById("preload-01").style.background="url(http://expsoft.com/image-01.png) no-repeat-9999px-9999px";

img1= new Image();img1.src="http://expsoft.com/path/to/image-001.gif";

if(img1.complete){ ready.call(img); load&& load.call(img);

callback.call(img1,img1.width, img1.height);

return;}//直接返回，不用再处理onload事件

img1.onload= function(){ callback.call(img1,img1.width, img1.height);};

懒加载核心代码参考：

.lazy{

display: none;

}

<img class="lazy" src="img/grey.gif" data-original="img/example.jpg" width="640" heigh="480">

必须在 DOM ready时将占位符显示出来,这可以在插件初始化的同时完成.

$("img.lazy").show().lazyload();

设置敏感度，默认情况下图片会出现在屏幕时加载.如果你想提前加载图片,可以设置 threshold选项,设置 threshold为 200令图片在距离屏幕 200像素时提前加载.

$("img.lazy").lazyload({ threshold: 200});

关于javascript图片什么时候加载和javascript图片预加载和延时加载的区别的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。