在加载特定图像后执行函数
在加载特定图像后执行函数
提问于 2016-02-14 00:50:02
我有一个低分辨率的.jpeg图像轮播，在加载完所有的.gifs (大约需要10秒)后，这些图像会被更大的.gifs替换。下面的代码用.gifs替换所有的.jpeg文件：
$(window).bind("load", function() {
$('#carousel-example-generic > .carousel-inner > .item > div[rel]').each(function() {
var rel = $(this).attr('rel');
var self = $(this);
var img = new Image();
$(img).load(rel, '', function() {
self.css('background-image', 'url('+rel+')');
});
});
});我希望在单个.jpg加载后立即用其对应的.gif替换每个.gif，而不是仅仅等待整个页面加载。
各个轮播项目的HTML如下所示：
<div style="background:url('whatever.jpg')" rel="background:url('whatever.gif')"></div>对如何实现这一点有什么建议吗？
回答 1
Stack Overflow用户
发布于 2016-02-14 01:09:03
删除window.onload处理程序，转而使用每个图像的onload处理程序
$('#carousel-example-generic > .carousel-inner > .item > div[rel]').each(function() {
var self = $(this);
var rel = self.attr('rel');
var img = new Image();
img.onload = function() {
self.css('background-image', 'url(' + rel + ')');
}
img.src = rel;
if (img.complete) img.onload(); // IE cache "hack"
});并确保将HTML更改为
<div style="background:url('whatever.jpg')" rel="whatever.gif"></div>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/35382571
复制相关文章
相似问题
腾讯云开发者
