我正在尝试从给定的链接加载图像
var imgPath = $(imgLink).attr('href');
并将其附加到页面,因此我可以将其插入到图像查看器的给定元素中.即使我搜索Stackoverflow和jQuery文档没有结束,我无法弄明白.
加载图像后,我想为它设置不同的值,如宽度,高度等.
更新:
这就是我得到的.我遇到的问题是我无法在img元素上运行jQuery函数.
function imagePostition(imgLink) {
// Load the image we want to display from the given <a> link
// Load the image path form the link
var imgPath = $(imgLink).attr('href');
// Add image to html
$('<img src="'+ imgPath +'" class="original">').load(function() {
$(imgLink).append(this);
var img = this;
// Resize the image to the window width
// http://stackoverflow.com/questions/1143517/jquery-resizing-image
var maxWidth = $(window).width(); // …在Web应用程序中,当我单击应该从服务器加载图像的链接时,由于图像大小约为3MB - 5 MB,因此需要花费太多时间,因为图像分辨率问题,我们无法缩小尺寸.
放置高度和宽度有一种解决方案,但我们无法为图像放置高度和宽度.我们怎么解决呢？
我正在将服务器中的图像加载到div中
<div>
<img src="http://upload.wikimedia.org/wikipedia/commons/1/15/Srtm_ramp2.world.21600x10800.jpg"/>
</div>这是我用来预加载图像的代码,我不确定它是否是最好的.我的问题是,如何触发和事件,例如alert(); 对话框已经完成加载所有图像？
var preload = ["a.gif", "b.gif", "c.gif"];
var images = [];
for (i = 0; i < preload.length; i++) {
images[i] = new Image();
images[i].src = preload[i];
}
是否可以预加载html视频？注意:标签将在以后动态创建.
目前,我可以通过创建隐藏的div并将所有图像放在那里来对图像执行此操作.然后,当我稍后创建需要时,不需要重新加载图像.
当使用视频标记完成此操作时,浏览器仍会在创建元素时从头开始加载视频.
我看到了这个:https://github.com/jussi-kalliokoski/html5Preloader.js,但它似乎不适用于视频.任何想法,将不胜感激!
简而言之,我有一个非常大的照片库,我试图在第一页加载时尽可能多地缓存缩略图.可能有1000多个缩略图.
第一个问题 - 尝试预加载/缓存那么多是愚蠢的吗？
第二个问题 - 当preload()函数触发时,整个浏览器停止响应一分钟到两分钟.此时回调会触发,因此预加载完成.有没有办法实现"智能预加载",在尝试加载这么多对象时不会妨碍用户体验/速度？
该$.preLoadImages功能来自这里:http://binarykitten.me.uk/dev/jq-plugins/107-jquery-image-preloader-plus-callbacks.html
这是我实现它的方式:
$(document).ready(function() {
setTimeout("preload()", 5000);
});
function preload() {
var images = ['image1.jpg', ... 'image1000.jpg'];
$.preLoadImages(images, function() { alert('done'); });
}
1000张图片很多.我问得太多了吗？
这是我的img,
<img src="one.png" id="one" onMouseOver="animateThis(this)">
当用户将鼠标悬停在使用jQuery时,我想慢慢将此图像src更改为"oneHovered.png".哪种jQuery方法最好这样做？我看到很多例子都希望我改变CSS背景.有什么可以直接改变src属性吗？
我有一个每12秒更改一次的背景.在Chrome,Firefox和Opera中,后台更改工作正常,但在Safari中,浏览器始终会再次加载图像,并且会在第一个周期的每个图像更改时闪烁.关于如何解决这个问题的任何想法.
这就是我处理背景变化的方式:
var img2 = new Image();
var img3 = new Image();
img2.src="/img/bg2.png";
img3.src="/img/bg3.png";
Meteor.setInterval(function(){
let elem = $(".header-2");
if(elem.hasClass("bg1")){
elem.removeClass("bg1");
elem.addClass("bg2");
let src = 'url('+img2.src.replace(location.origin,'')+')';
elem.css("background-image", src);
}
else if(elem.hasClass("bg2")){
elem.removeClass("bg2");
elem.addClass("bg3");
let src = 'url('+img3.src.replace(location.origin,'')+')';
elem.css("background-image", src);
}
else{
elem.removeClass("bg3");
elem.addClass("bg1");
}
}, 12*1000)
css类:
.header-2.bg1 {
background-image: url('/img/bg1.png');
}
.header-2.bg2 {
}
.header-2.bg3 {
}
我修改了Visual Idiot的Unslider(http://unslider.com/)以适应基于图像比例的多宽度幻灯片,但是在这个过程中,我遇到了一个错误导致幻灯片加载为微小的缩略图(我认为在图像没有一直加载的情况下).这是问题#1.所以我试图等到所有图像都加载完毕.但我还没有找到成功做到这一点的方法.这是问题#2.
这是我在Unslider init()函数中添加的代码:
_.init = function(el, o) {
// Check whether we're passing any options in to Unslider
_.o = $.extend(_.o, o);
_.el = el;
_.ul = el.find(_.o.items);
_.max = [el.outerWidth() | 0, el.outerHeight() | 0];
_.max = [100, 100];
_.li = _.ul.find(_.o.item).each(function(index) {
var me = $(this);
var an_image = me.find('img');
an_image.load(function() {
width = an_image[0].naturalWidth,
height = an_image[0].naturalHeight;
setSlideHeight(an_image, width, height, 300, 20);
if ( an_image.parent().parent().is(":last-child") ) {
_.el.css("width", 900);
}
})
// Set the …我正在基于ajax回调动态创建div.每个div包含一个png图像:
var myDiv = "<div class='myClass' id='divid'>" +
"<img id='newDiagDivId' src='images/approved-icon.png'>" +
"<div style='display:inline-block;vertical-align:top;'>blah</div>" +
"</div>";
...这是我如何添加它:
$(myDiv).hide().appendTo( divContainer).fadeIn( 100);
div显示格式正确,但png图像大约需要5到10秒才能显示.这是一个只有2kb的小图像,由应用程序本身托管.问题发生在FF,Chrome和IE上,行为上几乎没有差异.
该页面以"快速火力"的方式处理大约每秒2-3次ajax回调,每次回调都吐出这些div,我没有慢机器,所以我不怀疑浏览器在加载图像时落后.
我有什么办法可以强制图像加载速度更快,或者在将div添加到dom后立即加载？