当源代码由js设置时加载检查图像
Check image is loaded when source set by js?
当我从jquery设置图像源时,我如何检查图像是否已加载。我想在鼠标上更改图像,由于图像大小较大,加载需要时间,所以我想在加载之前显示加载图像。
这是我的代码片段:
timer = setInterval(function() {
selector.attr('src', 'localhost/product/image1.jpg');
图像1是436x436,加载需要时间我想在加载此图像之前显示加载图像
请帮我…
使用以下代码
selector.attr('src', 'localhost/product/image1.jpg');
//show loader code here
var loadImage = new Image();
loadImage.src = selector.attr('src');
loadImage.onload = function(){
// hide loader code here
}
//show image on mouseenter event
img.addEventListener('mouseenter',function(){
this.setAttribute('src', 'localhost/product/image1.jpg');
//show loading image here
});
img.addEventListener('load',function(){
//Image loaded. So remove loading image here.
});
您可以使用以下函数来获取图像的加载回调:
$("#idOfImage").load(function() { /* image loaded */})
.error(function() { /* error in loading */ });
这是我在我的网站兄弟上所做的,它的加载非常完美。
HTML
<a href="#" full="http://www.sample.com/wp-content/uploads/2015/01/plot3picture.jpg">
<img src="http://www.sample.com/wp-content/uploads/2015/01/plot3picture-150x150.jpg" alt="" />
</a>
JS
$( window ).bind( 'load', function(){
setTimeout( function(){
$( 'body a' ).each( function(){
$( this ).find( 'img' ).attr( 'src', $( this ).attr( 'full' ) );
});
}, 300 );
});
在页面加载上加载两个图像。将其放在标题中
试试这个:
if (document.images) {
img1 = new Image();
img1.src = "imgpath/image1.png";
img2 = new Image();
img2.src = "imgpath/image2.png"";
}
相关文章:
- 指令加载真的很长,检查加载时间的方法
- 如何检查图像是否已加载
- JS触发器值检查在文档加载后添加到页面的元素在加载时更改AND
- 用javascript从窗口获取文档,同时检查文档是否已加载
- 检查是否已加载原型
- 在页面加载之前检查登录和重定向
- 检查HTML是否已加载到DIV中
- 如何检查mithril.js是否已加载
- 如何检查iframe是否加载在JavaScript中
- 登录同一页面,检查SESSION而不重新加载
- 检查浏览器是否支持iFrame上的加载方法
- 检查Google Analytics是否已加载并调用ga('create',..)
- 如何检查DOM元素是否已完全加载
- javascript页面加载检查是否存在具有特定类的span(在<tr>下),如果不存在,则删除整个<
- jquery图像加载检查错误
- angular未能加载检查器中的资源错误
- 当源代码由js设置时加载检查图像
- Javascript跨域图像加载检查加载图像是否加载成功
- 浏览器是否完全加载检查
- 如何制作一个不完整的页面加载检查器