var IE=navigator.appName=="Microsoft Internet Explorer";
var Opera=navigator.appName.toLowerCase()=="opera";
var FF=!IE && !Opera;
function loaderFunction(style,num,iframe_width,iframe_height) {
this._preImages = new Array();
this._imageUrlBuffer = new Array();
this._currentID = 0;
this._loaded = new Array();
this._loadedNum = 0;
this._currentLoading = "";
this._timeOut = 2 * 1000;
this._timeElapsed = 0;
this._checkInterval = 50;
this._style = style;
this._num = num;
this._iframe_height = iframe_height;
this._iframe_width = iframe_width;
this._loadok = new Array();
}
loaderFunction.prototype.add = function() {
for (var i = this._currentID; i < arguments.length; this._currentID++,i++) {
if (arguments[i] != null || arguments[i] != "") {
this._imageUrlBuffer[i] = arguments[i];
}
}
}
loaderFunction.prototype.getResourceCount = function() {
return this._imageUrlBuffer.length;
}
loaderFunction.prototype.getLoadedCount = function() {
return this._loadedNum;
}
loaderFunction.prototype.getCurrentLoading = function() {
return this._currentLoading;
}
loaderFunction.prototype.setTimeOut = function(ts) {
this._timeOut = ts;
}
loaderFunction.prototype.getTimeOut = function() {
return this._timeOut;
}
loaderFunction.prototype.startLoad = function() {
for (var i = 0; i < this._imageUrlBuffer.length; i++) {
this._preImages[i] = new Image();
var test = new Image();
if(FF)
{
this._preImages[i].onload = this.loading(i);
}
this._preImages[i].src = this._imageUrlBuffer[i];
this._loaded[i] = false;
}
this.checkLoad();
}
if(FF)
{
loaderFunction.prototype.loading = function(k)
{
this._loadok[k] = 1;
}
}
loaderFunction.prototype.checkLoad = function() {
if (this._loadedNum == this._preImages.length) {
this.onLoadFinish();
return;
}
if (this._timeElapsed >= this._timeOut) {
this.onTimeOut();
return;
}
for (i = 0; i < this._preImages.length; i++) {
if(FF)
{
if (this._loaded[i] == false && this._loadok[i] == 1 && this._preImages[i].height == 50) {
this._loaded[i] = true;
this._currentLoading = this._imageUrlBuffer[i];
this._loadedNum++;
this.onProgressChange();
}
}
else
{
if (this._loaded[i] == false && this._preImages[i].complete) {
this._loaded[i] = true;
this._currentLoading = this._imageUrlBuffer[i];
this._loadedNum++;
this.onProgressChange();
}
}
}
this._timeElapsed += this._checkInterval;
setTimeout("a"+this._style+".checkLoad()",this._checkInterval);
}
loaderFunction.prototype.onProgressChange = function() {
;
}
loaderFunction.prototype.onLoadFinish = function() {
document.getElementById("d"+this._style).innerHTML=DilinglingShowad(this._style,this._num,this._iframe_width,this._iframe_height);
}
loaderFunction.prototype.onTimeOut = function() {
//alert("timeout!");
}
分享到:
相关推荐
在这种情况下,可能需要采取其他策略来判断图片是否已经被缓存并决定如何处理。 以上就是使用JavaScript获取图片实际尺寸的基本方法和注意事项。通过理解这些知识点,我们可以在Web开发中更加灵活和准确地处理图片...
由于图片滚动加载只会在滚动时执行,所以对于即时加入的图片将不会进行加载操作,此时你可以执行扩展方法loading()去实时执行一次加载方法 补充说明 影响范围:仅对滚动元素内包含data-url属性的img起效 起效条件:...
JavaScript is all like "You images done yet or what?" imagesloaded.desandro.com Detect when images have been loaded.
下面小编给大家整理了几种关于JS判断图片是否加载完成方法汇总,一起看看吧。 一、load事件 [removed] $('img').onload = function() { //code } [removed] 优点:简单易用,不影响HTML代码。 缺点:只能指定一...
图片预加载是指在浏览器中预先加载图片,以提高用户体验和减少流量消耗的一种技术。JS 实现图片预加载可以通过使用 Image 对象来实现图片的预下载,并且可以结合容器的宽和高,按照一定的缩放比例使图片显示出来。 ...
5. 加载图片:当图片进入可视区域时,将`data-src`替换为`src`,触发图片加载。 ```javascript function loadImage(img) { img.src = img.dataset.src; img.classList.remove('lazy'); // 可选:移除懒加载类,...
当指定的图片资源无法加载时,为了提升用户体验,我们可以利用JavaScript来检测图片是否成功加载,如果图片不存在,则可以显示一张默认图片。以下详细知识点涵盖了如何用JavaScript判断图片是否存在,以及实现这一...
而"好用的图片懒加载库"则通过监听滚动事件,判断图片是否进入视口,只有当图片将要可见时才发起请求加载图片,从而显著减少初始加载时间。 懒加载插件的工作原理主要包括以下几个步骤: 1. **标记图片**:在HTML...
例如,可以编写一个JavaScript函数检查所有图片是否加载完成,或者等待特定的DOM元素出现。然后,使用WebBrowser的`InvokeScript`方法调用这个函数,并在返回结果表明页面准备好的时候触发一个C#事件。 4. **等待...
综上所述,"As Lightbox + js 加载图片进度"是一个关于网页图片展示技术的话题,涉及JavaScript的事件监听、图片加载优化和用户体验设计等多个方面。通过理解这些知识点,开发者可以创建更加友好和高效的图片浏览...
3. **动画效果**:加载图片时,可以添加过渡效果,比如淡入、渐显,提升用户体验。 4. **图片懒加载插件选择**:除了`lazyload`,还有其他如`lozad.js`、`lazysizes`等优秀插件,可以根据项目需求选择合适的。 5. ...
**懒加载(Lazy Load)异步加载图片技术详解** 懒加载是一种优化网页性能的技术,它主要应用于图片或者视频等大体积资源的加载。在网页初次加载时,只加载视口内的图片,当用户滚动页面,即将进入视口的图片才会被...
5. **替换数据源**:当图片进入视口时,将`data-src`中的URL替换到`src`属性中,触发浏览器加载图片。 6. **可选:动画效果**:为了提供更好的用户体验,还可以添加一些过渡效果,如淡入等,使得图片加载更加平滑。...
本篇文章将详细讲解延迟加载在JavaScript(js)和jQuery中的应用,以及如何实现页面和图片的延迟加载。 一、延迟加载的概念 延迟加载,也称为懒加载(Lazy Loading),是指在需要时才加载资源的技术。这种技术主要...
这种技术允许网页只在用户实际看到的区域,即浏览器可视范围内加载图片,而不是一次性加载所有图片。这样可以显著减少初次页面加载时的数据量,提高页面加载速度,进而改善用户浏览体验。 图片懒加载的核心原理是...
JS文件则包含了实际的懒加载逻辑,包括滚动事件监听、判断图片是否在视口以及加载图片的功能。可能还会包含一些额外的功能,比如防抖动处理(debounce)或节流(throttle)来减少滚动事件的频繁触发,提高性能。 ...
JavaScript延迟加载图片是一种优化网页性能的技术,特别是在网页包含大量图片时。这种技术允许网页只在用户滚动到可视区域时才加载图片,而不是一次性全部加载,从而减少了页面初始加载时间,提高了用户体验,特别是...
在JavaScript中,判断图片是否加载完成以及获取图片的宽度是前端开发中常见的需求。这主要应用于处理用户上传图片时可能出现的布局问题,如图片加载不...在处理用户上传图片或动态加载图片的场景中,这些技巧尤其重要。
HTML延迟加载图片,也称为懒加载(Lazy Load),是一种优化网页性能的技术,它允许网页只在需要时才加载图片,而不是一次性加载所有内容。这种技术对于拥有大量图片的页面尤其有益,因为它可以显著减少页面的初始...
4. `jquery.scrollLoading.js`:这个文件可能是基于jQuery编写的脚本,专门用于实现滚动条自动加载图片或页面内容的功能。它可能包含了监听滚动事件、判断加载时机、请求新数据以及插入新内容到页面等逻辑。 综上所...