`

兼容IE,firefox,chrome,safari预加载图片height和width获取

阅读更多

在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. 互动反馈:添加适当的视觉反馈,如鼠标悬停时的高亮提示,...

    jQuery仿Facebook图片画廊代码.zip

    10. **兼容性测试**:最后,确保代码在主流浏览器上运行正常,包括Chrome、Firefox、Safari、Edge以及旧版的IE。可以使用jQuery的跨浏览器兼容性特性来处理这些问题。 综上所述,实现一个jQuery仿Facebook图片画廊...

    jQuery迅雷首页全屏图片切换代码.zip

    - **兼容性**:确保代码兼容主流浏览器,包括Chrome、Firefox、Safari、Edge以及旧版本的IE。 - **响应式设计**:为了适应不同设备和屏幕尺寸,可能需要调整CSS布局和图片大小。 - **性能优化**:合理使用缓存,避免...

    预加载css或javascript的js代码

    1. 在Firefox中,`<img>`元素的`src`属性无法用于预加载CSS和JavaScript,因为Firefox对图片有单独的缓存机制。同时,Safari和Chrome似乎也不支持这种预加载方式。 2. 使用`<object>`标签预加载资源时,必须将其插入...

    兼容电脑手机各浏览器的视频播放

    2. 跨浏览器兼容性:不同的浏览器可能支持不同的视频编码格式,例如,Firefox和Chrome支持WebM(VP8+Vorbis)和MP4(H.264+AAC),而Safari和旧版本的IE主要支持MP4。为了确保全平台兼容,通常需要提供多种格式的...

    HTML5视频音频实现.docx

    1. Ogg:包含Theora视频编码和Vorbis音频编码,主要在Firefox, Chrome和Opera等浏览器中得到支持。 2. MPEG4:采用H.264视频编码和AAC音频编码,适用于Safari, Chrome和大部分移动设备。 3. WebM:结合VP8视频编码和...

    jQuery聚焦相册.zip

    10. **兼容性测试**:确保jQuery代码在主流浏览器(如Chrome、Firefox、Safari、Edge和IE)上都能正常工作,需要进行兼容性测试。 综上所述,jQuery聚焦相册的实现涉及到多种jQuery技术,包括选择器、事件处理、CSS...

    mp3网页播放兼容大部分浏览器

    "mp3网页播放兼容大部分浏览器"这个主题聚焦于如何创建一个跨浏览器的MP3播放解决方案,确保在Firefox (FF)、Google Chrome、Safari、Opera、Internet Explorer (IE) 6、7、8以及360、搜狗、世界之窗和遨游等常见...

    HTML5&CSS3网页制作:支持视频和音频的浏览器.pptx

    例如,IE使用Trident内核,Firefox使用Gecko,Chrome和Opera使用Blink(源自WebKit),Safari使用WebKit。了解这些内核有助于优化网页在不同浏览器上的表现。 在编写HTML5的视频和音频标签时,还需要注意一些最佳...

    网页加声音和视频.rar

    同时,保持对不同浏览器和设备的兼容性,如检查Edge、Firefox、Chrome、Safari和旧版IE的兼容性。 综上所述,网页中的声音和视频不仅提升了用户体验,也展示了现代Web技术的灵活性和多样性。通过合理使用HTML5的...

    HTML5教程.pdf

    比如,autoplay属性可以让视频在加载完成后立即播放,height和width属性用来设置视频播放器的高度和宽度,loop属性使视频循环播放,preload属性可以预加载视频,以减少加载时间。 HTML5的这些新特性不仅改善了网页...

    HTML5教程本教程向您讲解 HTML5 中的新特性

    例如,Firefox、Opera 和 Chrome 支持 Ogg 格式,而 Safari 则倾向于 MP4 格式。因此,提供多种格式的视频源对于确保跨浏览器兼容性至关重要。 HTML5 `<video>` 元素还支持一系列属性,如 `autoplay` 自动播放视频...

    js实现pdf在线预览问题.zip

    1. PDF.js:由Mozilla开发的开源库,专门用于在浏览器中渲染PDF文档,支持多种浏览器,包括Chrome、Firefox、Safari等。它是目前最常用的JavaScript库之一,提供了强大的PDF预览能力。 2. ViewerJS:另一个开源的...

    HTML5中如何显示视频呢 HTML5视频播放demo.docx

    例如,Firefox和Chrome倾向于支持Ogg和WebM格式,而Safari和Internet Explorer则更倾向于MP4格式。通过提供多个`<source>`元素,浏览器会自动选择它能播放的第一个格式。 总结来说,HTML5的`<video>`元素让网页视频...

    caroufredsel图片插件制作图片局部放大查看效果

    CarouFredSel是一款强大的jQuery插件,它不仅能够实现图片轮播,还能帮助我们创建这种图片局部放大的功能,并且兼容主流浏览器,如Chrome、Firefox、Safari、Edge等。 首先,让我们了解CarouFredSel的基本概念。...

    jQuery zoomImage 图片放大展示效果插件附示例.rar

    jQuery zoomImage插件旨在兼容大多数现代浏览器,包括Chrome、Firefox、Safari、Edge以及Internet Explorer 9及以上版本。不过,对于老旧的浏览器,可能需要额外的 polyfill 或调整来确保其正常工作。 ### 6. **...

    fancybox_弹窗 插件

    在描述中提到,Fancybox是“兼容所有A级浏览器”的,这意味着它可以在主流的现代浏览器如Chrome、Firefox、Safari、Edge和Internet Explorer上稳定运行,确保了跨平台和跨设备的兼容性。此外,Fancybox还支持Flash,...

    使用h5实现的音频播放器

    例如,Chrome、Firefox和Safari支持MP3,而一些旧版本的Firefox可能需要Ogg格式。因此,通常会提供多个来源,确保广泛兼容: ```html Your browser does not support the audio element. ``` 5. **...

    JQuery图片轮播

    5. **兼容性**:支持主流浏览器,包括Firefox、Chrome、Safari、Opera以及Internet Explorer。 实现CoinSlider轮播的步骤大致如下: 1. **引入资源**:在HTML文件中,引入jQuery库和CoinSlider插件的CSS及JS文件。...

    HTML5中如何显示视频呢 HTML5视频播放demo.pdf

    Ogg 格式一般适用于 Firefox、Opera 和 Chrome,而 MP4 则适用于 Safari 和 Internet Explorer 9 及以上版本。 除了上述属性外,`<video>` 标签还有其他一些常用的属性: 1. `autoplay`:当这个属性存在时,视频会...

Global site tag (gtag.js) - Google Analytics