JavaScript实现图片预加载,自适应指定尺寸容器

<!DOCTYPE html>
<html>
<head>
<title>javascript</title>
    <meta type="viewport" content="width=device-width,initial-scale:1.0,user-scalable:no"/>
</head>

<body>
    <input type="button" class="buttons" id="js_button" value="载入图片"/>
    <div class="image_con js_imageCon" id="js_imageCon"></div>
</body>
<script type="text/javascript">
    var button = document.getElementById("js_button");

    button.onclick = function(){
        var image = document.createElement("img");

        image.onload = function(){
            var w = this.width;
            var h = this.height;
            var p = w/h;

            if(image.readyState=="complete"||image.readyState=="loaded"||image.complete){  //条件1,2是判断ie6-ie10;条件3是判断除ie6-ie10外的浏览器。
                if(p>1){   //p>1 此条件可以按需修改
                    this.style.width = "300px";
                    this.style.height = "auto";  //切记要加,(只为跨过ie给img默认添加width和height属性坑这里的width和height的值是图片实际的尺寸),如果不加ie中会按照图片实际height显示,图会变形
                }else{
                    this.style.width = "auto";  //同上
                    this.style.height = "180px";
                }
                //以下两行代码切记写到onload事件里边,避免谷歌中图片尺寸更改时过程的可见(由大变小,或由小变大)。
                var imgCon = document.getElementById("js_imageCon");
                imgCon.appendChild(image);
            }
        };
        image.src = "images/image.jpg"
    }
</script>
</html>

时间: 2024-10-31 06:50:51

JavaScript实现图片预加载,自适应指定尺寸容器的相关文章

Javascript实现图片预加载【回调函数,多张图片】

使用JS实现一组图片动画效果或者使用HTML5 Canvas渲染一系列图片等案例中,需要图片全部加载完成方可运行动画效果.此时程序中就会涉及多张图片预加载代码.当接二连三的案例中都涉及图片预加载时,就需要考虑把这个功能封装为一个通用方法. (1)下面为JS实现图片预加载方法loadImages(): Js代码   //实现一系列图片的预加载 //参数sources:图片信息关联数组 //参数callback:回调函数——图片预加载完成后立即执行此函数. function loadImages(s

javascript实现图片预加载

function load(url) { let imgObj = new Image(); // 创建图片对象 imgObj.src = url; if (imgObj.complete) { console.log('is loaded') } else { imgObj.onload = () => { console.log('loading success') }; imgObj.onerror = () => { console.log('loading error') } } }

再谈javascript图片预加载技术

图片预加载技术的典型应用: 如lightbox方式展现照片,无疑需要提前获得大图的尺寸,这样才能居中定位,由于javascript无法获取img文件头数据,必须等待其加载完毕后才能获取真实的大小然后展示出来,所以lightbox显示的图片的速度体验要比直接输出的差很多,而本文说提到的预加载技术主要针对获取图片尺寸. 一段典型的使用预加载获取图片大小的例子: var imgLoad = function (url, callback) {    var img = new Image();   

利用CSS、JavaScript及Ajax实现图片预加载的三大方法

原文:3 Ways to Preload Images with CSS, JavaScript, or Ajax 译文:利用CSS.JavaScript及Ajax实现图片预加载的三大方法 预加载图片是提高用户体验的一个很好方法.图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度.这对图片画廊及图片占据很大比例的网站来说十分有利,它保证了图片快速.无缝地发布,也可帮助用户在浏览你网站内容时获得更好的用户体验.本文将分享三个不同的预加载技术,来增强网站的性能与可用性.

利用CSS、JavaScript及Ajax实现图片预加载的三大方法及优缺点分析

预加载图片是提高用户体验的一个很好方法.图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度.这对图片画廊及图片占据很大比例的网站来说十分有利,它保证了图片快速.无缝地发布,也可帮助用户在浏览你网站内容时获得更好的用户体验.本文将分享三个不同的预加载技术,来增强网站的性能与可用性. 方法一:用CSS和JavaScript实现预加载 实现预加载图片有很多方法,包括使用CSS.JavaScript及两者的各种组合.这些技术可根据不同设计场景设计出相应的解决方案,十分高效.

使用CSS、JavaScript及Ajax实现图片预加载的方法详解 

预加载图片是提高用户体验的一个很好方法.图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度.这对图片画廊及图片占据很大比例的网站来说十分有利,它保证了图片快速.无缝地发布,也可帮助用户在浏览你网站内容时获得更好的用户体验.本文将分享使用CSS.JavaScript及Ajax实现图片预加载的三个不同技术,来增强网站的性能与可用性.一起来看看吧,希望对大家学习web前端有所帮助. 方法一:用CSS和JavaScript实现预加载 实现预加载图片有很多方法,包括使用CSS

Javascript图片预加载详解

预加载图片是提高用户体验的一个很好方法.图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度.这对图片画廊及图片占据很大比例的网站来说十分有利,它保证了图片快速.无缝地发布,也可帮助用户在浏览你网站内容时获得更好的用户体验.本文将分享三个不同的预加载技术,来增强网站的性能与可用性. 方法一:用CSS和JavaScript实现预加载 实现预加载图片有很多方法,包括使用CSS.JavaScript及两者的各种组合.这些技术可根据不同设计场景设计出相应的解决方案,十分高效.

[转]利用CSS、JavaScript及Ajax实现图片预加载的三大方法

Perishable Press网站近日发表了一篇文章<3 Ways to Preload Images with CSS, JavaScript, or Ajax>,分享了利用CSS.JavaScript及Ajax实现图片预加载的三大方法.下面为译文. 预加载图片是提高用户体验的一个很好方法.图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度.这对图片画廊及图 片占据很大比例的网站来说十分有利,它保证了图片快速.无缝地发布,也可帮助用户在浏览你网站内容时获得更好

JavaScript图片预加载

图片预加载是web开发中一种应用相当广泛的技术,比如我们在做图片翻转显示等特效的时候,为了让图片在转换的时候不出现等待,我们最好是先让图片下载到本地,然后在继续执行后续的操作.今天我们将来实现一个完整的图片预加载和处理图片加载后执行后续操作的代码. 下面的函数实现了一个我们想要的最基本的图片预加载效果 function preloadimages(arr){    var newimages=[]    var arr=(typeof arr!="object")? [arr] : a