在web开发中我们有时需要通过js去预加载图片,按照平常的写法:
var img=new Image();
img.src="xxxx图片路径";
然后alert(img.height);
这种写法在chrome上就不适用了,在chrome中弹出0.
为了修正这种异常可以采用下面的写法
function loadImage(url) {
var img = new Image();
img.src = url;
if (img.complete) {
alert(img.width);
return;
}
img.onload = function () {
callback.call(img);
alert(this.height);
};
};
这种写法就可以解决这个这一问题了。
jquery写法
$("img").load(function(){
if (this.complete||this.readyState=="complete") {
$(this).css({"margin-left":(120-this.width)/2,"margin-top":(80-this.height)/2});
return;
}
})
分享到:
相关推荐
8. 兼容性测试:由于使用了CSS3和JavaScript,需要确保在主流浏览器(如Chrome、Firefox、Safari、Edge和IE)上都能正常工作,进行充分的兼容性测试。 9. 互动反馈:添加适当的视觉反馈,如鼠标悬停时的高亮提示,...
10. **兼容性测试**:最后,确保代码在主流浏览器上运行正常,包括Chrome、Firefox、Safari、Edge以及旧版的IE。可以使用jQuery的跨浏览器兼容性特性来处理这些问题。 综上所述,实现一个jQuery仿Facebook图片画廊...
- **兼容性**:确保代码兼容主流浏览器,包括Chrome、Firefox、Safari、Edge以及旧版本的IE。 - **响应式设计**:为了适应不同设备和屏幕尺寸,可能需要调整CSS布局和图片大小。 - **性能优化**:合理使用缓存,避免...
1. 在Firefox中,`<img>`元素的`src`属性无法用于预加载CSS和JavaScript,因为Firefox对图片有单独的缓存机制。同时,Safari和Chrome似乎也不支持这种预加载方式。 2. 使用`<object>`标签预加载资源时,必须将其插入...
2. 跨浏览器兼容性:不同的浏览器可能支持不同的视频编码格式,例如,Firefox和Chrome支持WebM(VP8+Vorbis)和MP4(H.264+AAC),而Safari和旧版本的IE主要支持MP4。为了确保全平台兼容,通常需要提供多种格式的...
1. Ogg:包含Theora视频编码和Vorbis音频编码,主要在Firefox, Chrome和Opera等浏览器中得到支持。 2. MPEG4:采用H.264视频编码和AAC音频编码,适用于Safari, Chrome和大部分移动设备。 3. WebM:结合VP8视频编码和...
10. **兼容性测试**:确保jQuery代码在主流浏览器(如Chrome、Firefox、Safari、Edge和IE)上都能正常工作,需要进行兼容性测试。 综上所述,jQuery聚焦相册的实现涉及到多种jQuery技术,包括选择器、事件处理、CSS...
"mp3网页播放兼容大部分浏览器"这个主题聚焦于如何创建一个跨浏览器的MP3播放解决方案,确保在Firefox (FF)、Google Chrome、Safari、Opera、Internet Explorer (IE) 6、7、8以及360、搜狗、世界之窗和遨游等常见...
例如,IE使用Trident内核,Firefox使用Gecko,Chrome和Opera使用Blink(源自WebKit),Safari使用WebKit。了解这些内核有助于优化网页在不同浏览器上的表现。 在编写HTML5的视频和音频标签时,还需要注意一些最佳...
同时,保持对不同浏览器和设备的兼容性,如检查Edge、Firefox、Chrome、Safari和旧版IE的兼容性。 综上所述,网页中的声音和视频不仅提升了用户体验,也展示了现代Web技术的灵活性和多样性。通过合理使用HTML5的...
比如,autoplay属性可以让视频在加载完成后立即播放,height和width属性用来设置视频播放器的高度和宽度,loop属性使视频循环播放,preload属性可以预加载视频,以减少加载时间。 HTML5的这些新特性不仅改善了网页...
例如,Firefox、Opera 和 Chrome 支持 Ogg 格式,而 Safari 则倾向于 MP4 格式。因此,提供多种格式的视频源对于确保跨浏览器兼容性至关重要。 HTML5 `<video>` 元素还支持一系列属性,如 `autoplay` 自动播放视频...
1. PDF.js:由Mozilla开发的开源库,专门用于在浏览器中渲染PDF文档,支持多种浏览器,包括Chrome、Firefox、Safari等。它是目前最常用的JavaScript库之一,提供了强大的PDF预览能力。 2. ViewerJS:另一个开源的...
例如,Firefox和Chrome倾向于支持Ogg和WebM格式,而Safari和Internet Explorer则更倾向于MP4格式。通过提供多个`<source>`元素,浏览器会自动选择它能播放的第一个格式。 总结来说,HTML5的`<video>`元素让网页视频...
CarouFredSel是一款强大的jQuery插件,它不仅能够实现图片轮播,还能帮助我们创建这种图片局部放大的功能,并且兼容主流浏览器,如Chrome、Firefox、Safari、Edge等。 首先,让我们了解CarouFredSel的基本概念。...
jQuery zoomImage插件旨在兼容大多数现代浏览器,包括Chrome、Firefox、Safari、Edge以及Internet Explorer 9及以上版本。不过,对于老旧的浏览器,可能需要额外的 polyfill 或调整来确保其正常工作。 ### 6. **...
在描述中提到,Fancybox是“兼容所有A级浏览器”的,这意味着它可以在主流的现代浏览器如Chrome、Firefox、Safari、Edge和Internet Explorer上稳定运行,确保了跨平台和跨设备的兼容性。此外,Fancybox还支持Flash,...
例如,Chrome、Firefox和Safari支持MP3,而一些旧版本的Firefox可能需要Ogg格式。因此,通常会提供多个来源,确保广泛兼容: ```html Your browser does not support the audio element. ``` 5. **...
5. **兼容性**:支持主流浏览器,包括Firefox、Chrome、Safari、Opera以及Internet Explorer。 实现CoinSlider轮播的步骤大致如下: 1. **引入资源**:在HTML文件中,引入jQuery库和CoinSlider插件的CSS及JS文件。...
Ogg 格式一般适用于 Firefox、Opera 和 Chrome,而 MP4 则适用于 Safari 和 Internet Explorer 9 及以上版本。 除了上述属性外,`<video>` 标签还有其他一些常用的属性: 1. `autoplay`:当这个属性存在时,视频会...