动态加载图片与脚本

更新日期: 2019-04-10阅读: 1.9k标签: 加载作者: 司徒正美

动态加载图片许多方法。第一种方法,随便创建一个块状元素如DIV,把它加入dom树,然后用css设置背景图片。第二种前半部分同第一种,只不过这次用innerhtml加一张图片变成它的子元素。第三种,利用createElement("img"),然后加入DOM与指定它的src属性。第四种,new Image对象,然后加入DOM与指定它的src属性。

window.onload = function(){
var image = document.createElement("div");
document.body.appendChild(image)
image.style.cssText = "width:400px;height:300px;background:url(http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s001.jpg)"
} window.onload = function(){
var image = document.createElement("div");
document.body.appendChild(image)
image.innerHTML = "<img src='http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s001.jpg'>";
} window.onload = function(){
var image = document.createElement("img");
document.body.appendChild(image)
image.src='http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s001.jpg';
} window.onload = function(){
var image = new Image;
document.body.appendChild(image)
image.src='http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s001.jpg';
}

代码量来看,首选最后一种。后两种起码很容易就得到图片对象的引用,我们可以用complete属性来判断其是否加载成功。不同于后面将讲述的script标签,在IE中,图片对象只要一加入src属性就开始下载图片,不管它是否已加入DOM树中。

来一个有用的应用,自动调整图片的大小。

<!doctype html>
<title>javascript自动调整图片大小 by 司徒正美</title>
<meta charset="utf-8"/>
<meta name="keywords" content="javascript自动调整图片大小 by 司徒正美" />
<meta name="description" content="javascript自动调整图片大小 by 司徒正美" />
<script type="text/javascript">
window.onload = function(){
var image = new Image;
image.src='http://dx.78land.com/images/new.jpg';
image.style.display = "";
var i = 0;
(function(){
i++;
if(image.complete){
(image.width>500) && (image.width = 500);/*统一设置*/
(image.height>200) && (image.height = 200);/*统一设置*/
}else{
setTimeout(arguments.callee,1);
}
})()
document.body.appendChild(image);
}
</script>
<h1 id="text">javascript自动调整图片大小 by 司徒正美</h1>

至于script,不像img有专门的内置对象,我们必须用createElement来创建。判断是否加载成功,与图片很不一样,我就不明白微软为什么不统一用complete属性,这次它改用readyState属性。不过 XMLHttpReques对象,微软也是用readyState属性。为了判断readyState 是否已经改变,微软还专门提供了一个onreadystatechange事件,这样我们就不用像上面那样写定时器了。readyState 有五个可能的值,分别为:

  • uninitialized:Object is not initialized with data.
  • loading:Object is loading its data..
  • loaded:Object has finished loading its data.
  • interactive:User can interact with the object even though it is not fully loaded.
  • complete:Object is completely initialized.

很明显当readyState 为complete时,脚本就可以运作了。不过onreadystatechange 事件不局限于script标签,它还可以用于object,iframe,frame,style等标签中。但有一个问题,如果我们想刷新页面,重新执行脚本,就没有反应,这时我们就要用到loaded值。换言之,complete只个时间点,loaded是个时间段。


对于标准浏览器,它们就没有这么复杂,直接用onload事件来监听就成了。

<!doctype html>
<title>javascript脚本加载 by 司徒正美</title>
<meta charset="utf-8"/>
<meta name="keywords" content="javascript脚本加载 by 司徒正美" />
<meta name="description" content="javascript脚本加载 by 司徒正美" />
<script type="text/javascript">
window.onload = function(){
var script = document.createElement("script")
script.type = "text/javascript";
script.src = "http://files.cnblogs.com/rubylouvre/myjs.js";
document.body.appendChild(script);
if (!+"\v1"){ //IE
script.onreadystatechange = function(){
if (script.readyState == "complete" || script.readyState == "loaded"){
alert(getElementsByClassName("title")[0].innerHTML);
}
};
} else {
script.onload = function(){
alert(getElementsByClassName("title")[0].innerHTML);
};
}
}
</script>
<h1 class="title">javascript脚本加载 by 司徒正美</h1>


链接: https://www.fly63.com/article/detial/8554

懒加载的3种实现方式

优势:性能收益:浏览器加载图片、decode、渲染都需要耗费资源,懒加载能节约性能消耗,缩短onload事件时间。节约带宽:这个不需要解释。

图片懒加载的前世今生

到此,实现图片懒加载主要有两种方法: 监听 scroll 事件,通过 getBoundingClientRect() 计算目标元素与视口的交叉状态;IntersectionObserver 接口。

Vue实现懒加载

什么叫懒加载?就是只有在访问的时候才会进行请求加载,这可以有效提升网站打开的速度,加上这行,就可以做到懒加载↓===括号里的路径改成组件的路径,然后就不需要在上面import了

页面性能优化-原生JS实现图片懒加载

在项目开发中,我们往往会遇到一个页面需要加载很多图片的情况。我们可以一次性加载全部的图片,但是考虑到用户有可能只浏览部分图片。所以我们需要对图片加载进行优化

js实现图片惰性加载

在讲图片的惰性加载前,我们先来聊聊惰性加载。惰性加载又称为延迟加载、懒加载等,还有个好听的英文名字叫做 lazyload。需要注意的是,惰性加载并不只是图片的专利,Javascript 中函数也有惰性加载的概念

小程序如何使用分包加载

在小程序开发的过程中,小程序的体积会随着版本的迭代变的越来越大,这时候我们就希望能够将小程序分成多个包从服务器下载,这样既可以加快首屏的渲染也便于后续按需加载的实现

php的自动加载的使用

在autoload机制引入前,要引用其他文件中的函数和类需使用include/require把文件加载。随着SPL库中的autoload机制以及命名空间的完善,现代化PHP开发鲜少见到以include/require的方式加载类

js判断异步引入的js文件是否加载完毕

在正常的加载过程中,js的加载都是同步的,也就是在加载过程中,浏览器会阻塞接下来的内容的加载。这时候我们就要用到动态加载,动态加载是异步的,如果我们在后边要用到这个动态加载的js文件里的东西

Flutter异步加载:Future,async/await

Future对象表示异步操作的结果,我们通常通过then()来处理返回的结果;async用于标明函数是一个异步函数,其返回值类型是Future对象;await用来等待耗时操作的返回结果,这个操作会阻塞到后面的代码

简单高效实现一个按需加载图片的逻辑

需求:根据页面滚动,当图片进入视野,就开始加载,否则不加载任何图片。页面加载完成时先调用一下,首屏内的图片。代码简单,却很通用,很实用。方便扩展

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!