在移动浏览器中通过javascript加载图像显示功能
Image-loaded-show function by javascript in mobile browser
我使用以下javascript代码在移动web浏览器(支持HTML5)中实现图像加载显示功能。图像加载显示是指在图像完全加载之前,图像的宽度和高度为0,即不会显示和占用任何空间。
现在的问题是,在加载所有图像之前,图像不会显示。
我需要的是页面中的iamage是独立的,一旦加载,图像就会显示出来。
关于如何修改这个javascript代码,有什么提示吗?谢谢
<script type='text/javascript'>
var srcs = [];
window.doBindLinks = function() {
var elems = document.getElementsByTagName('img');
for (var i = 0; i < elems.length; i++) {
var elem = elems[i];
var link = elem.getAttribute('src');
elem.setAttribute('link', link);
elem.removeAttribute('width');
elem.removeAttribute('height');
elem.removeAttribute('class');
elem.removeAttribute('style');
if(link.indexOf('.gif')>0)
{
elem.parentNode.removeChild(elem);
}else{
}
}
var content = document.getElementById('content');
var images = content.getElementsByTagName('img');
for (var i = 0; i < images.length; i++) {
srcs[i] = images[i].src;
loadImage(images[i], srcs[i],
function (cur, img, cached) {
cur.src = img.src;},
function (cur, img) {
cur.style.display = 'none';});
}
};
var loadImage = function (cur, url, callback, onerror) {
var img = new Image();
img.src = url;
img.width = '100%';
if (img.complete) {
callback && callback(cur, img, true);
return;
}
img.onload = function () {
callback && callback(cur, img, true);
return;
};
if (typeof onerror == 'function') {
img.onerror = function () {
onerror && onerror(cur, img);
}
}
};
</script>
该页面的源代码为:
<body onload="doBindLinks();"><div id="content"> images and text </div></body>
p.S:因为我需要用C#编写这个javascript字符串,所以我将(")替换为(').
编辑时间:以下是正确的吗:
window.doBindLinks = function() {
var elems = document.getElementsByTagName('img');
for (var i = 0; i < elems.length; i++) {
var elem = elems[i];
var link = elem.getAttribute('src');
elem.setAttribute('link', link);
elem.removeAttribute('width');
elem.removeAttribute('height');
elem.removeAttribute('class');
elem.removeAttribute('style');
elem.setAttribute('display','none');
if(link.indexOf('.gif')>0)
{
elem.parentNode.removeChild(elem);
}else{
}
elem.attachEvent('onload',onImageLoaded);
}
};
window.onImageLoaded = function() {
var elem = event.srcElement;
if ( elem != null ) {
elem.setAttribute('display','block');
}
return false;
};
此外,css代码为:
img {width: 100%; border-style:none;text-align:center;}
但在加载完所有图像之前,这些图像仍然无法显示。
我不能百分之百肯定我理解你的问题。您是否试图隐藏图像,直到它完全加载?你是把图片写到页面上,还是它们已经在页面上了?这里有几个选项:
-
set style="display:none"。然后将onload="this.style.display='';"事件侦听器添加到图像中。每个图像将在加载时显示。
-
如果您能够更改c代码,那么只需将所有图像url作为字符串列表写入imageload函数即可。然后使用此功能创建图像并将其添加到内容分区。
我希望这对你有帮助。如果没有,请提供更多的上下文,我会尽力提供进一步的帮助。
好的,我知道你现在要去哪里了。您可以去掉所有已编写的javascript。也许把它打印出来,这样你就可以把它扔进垃圾桶了。那就拿我的例子来说。。。它会帮你的。每个图像仅在加载时显示。显然,如果您想更改任何其他属性,可以在showImage函数中进行更改。希望这能有所帮助。
<html>
<head>
<style>
img{display:none;}
</style>
<script type="text/javascript">
function showImage(elem) {
elem.style.display = 'block';
}
</script>
</head>
<body><div id="content">
<img src="http://t0.gstatic.com/images?q=tbn:ANd9GcTlpi72nRCVE5cOz3AImtbb7GEbEYRVLkLJxAZsT5Z4XKicteDo" onload="showImage(this)" />
<img src="http://t0.gstatic.com/images?q=tbn:ANd9GcTlpi72nRCVE5cOz3AImtbb7GEbEYRVLkLJxAZsT5Z4XKicteDo" onload="showImage(this)" />
<img src="http://t0.gstatic.com/images?q=tbn:ANd9GcTlpi72nRCVE5cOz3AImtbb7GEbEYRVLkLJxAZsT5Z4XKicteDo" onload="showImage(this)" />
<img src="http://t0.gstatic.com/images?q=tbn:ANd9GcTlpi72nRCVE5cOz3AImtbb7GEbEYRVLkLJxAZsT5Z4XKicteDo" onload="showImage(this)" />
<img src="http://t0.gstatic.com/images?q=tbn:ANd9GcTlpi72nRCVE5cOz3AImtbb7GEbEYRVLkLJxAZsT5Z4XKicteDo" onload="showImage(this)" />
<img src="http://t0.gstatic.com/images?q=tbn:ANd9GcTlpi72nRCVE5cOz3AImtbb7GEbEYRVLkLJxAZsT5Z4XKicteDo" onload="showImage(this)" />
</dvi>
</body>
</html>
相关文章:
- 如何在谷歌字体加载时显示加载图像
- 预加载图像并插入DOM
- 加载图像时加载图标
- 在页面启动期间加载图像
- 预加载图像image.onload脚本MVC
- 可以't在我的React组件中加载图像
- 加载图像后调整HTML画布的大小
- HTML/JS github页面项目没有't在使用firefox运行时加载图像或声音
- 错误:$injector:modulerr加载图像时模块处于角度
- 谷歌地图加载后隐藏加载图像
- 在照片查看器(Javascript和jQuery)中异步加载图像时可能出现错误
- 正在从字节数组加载图像内容
- 网页上已有tinymce加载图像列表
- 单击提交按钮后加载图像将冻结
- 如何使用Express'正确加载图像;s的静态中间件
- 使用jquery即时加载图像
- Html5画布使用JCanvasScript加载图像
- Javascript使用JCanvaScript在画布中加载图像
- 使用jquery/ajax显示加载图像
- ajax缓存false无法加载图像