通过jQuery Ajax加载图像

我正在创建一个浏览大量图片的应用程序。 此时,项目的这一部分已完成,它会对正确的图片进行排序,过滤和加载,甚至将它们拆分为单独的页面以加快加载速度。</ p>

这很有效,但是 每页加载25张图片仍需要8秒钟。 我做了一些研究,我得出结论,使用异步jQuery Ajax请求最好尽可能快地加载它们。</ p>

这是我的代码所以 far:</ p>

  var imageArray =&lt;?php if(!empty($ images)){echo'[“'。implode('”,“',$ images)  。'“'';} else {echo”false“;}?&gt ;; 
console.log(imageArray);
console.log(imageArray.length);
for(i = 0; i&lt; imageArray.length ; i ++){
$ .ajax({
type:'GET',
url:imageArray [i],
dataType:'image / jpg',
async:true,
success:function( 数据){
$(“#”+ i).attr(“src”,data);
}
});
}
</ code> </ pre>

此代码的问题在于它除了带有灰色边框的空白色方块外不会加载任何内容。 当我修改代码并在Chrome中的控制台中运行代码时, data </ code>最终会成为一串混乱的字符,我认为这些字符是原始图像数据。</ p>

我现在已经搜索了好几天,包括在SO上,我还没有找到能满足我需要的解决方案。 相反,我找到了使用jQuery attr()</ code>将url简单地放入图像源的解决方案,这不是我需要的。</ p>

如果有人 可以提供任何类型的解决方案来修复此代码,甚至可能是获取所有图像的不同且更有效的方法,我对任何事情持开放态度。</ p>

imageArray </ strong >: http://pastebin.com/03tvpNey </ strong> </ p>
\ n

问候,
Emanuel </ p>
</ div>

展开原文

原文

I am creating an application which browses a large amount of pictures. At this point, that portion of the project is done and it sorts, filters, and loads the correct pictures, and even splits them into separate pages for faster loading.

This works great, but it still takes over 8 seconds to load the 25 pictures per page. I have done some research and I have concluded that using asynchronous jQuery Ajax requests would be the best to load them all at the same time as fast as possible.

Here is my code for this so far:

var imageArray = <?php if (!empty($images)) {echo '["' . implode('", "', $images) . '"]';} else {echo "false";} ?>;
console.log(imageArray);
console.log(imageArray.length);
for (i = 0; i < imageArray.length; i++) {
    $.ajax({
        type: 'GET',
        url: imageArray[i],
        dataType: 'image/jpg',
        async: true,
        success: function (data) {
            $("#" + i).attr("src", data);
        }
    });
}

The problem with this code is that it doesn't load nothing but an empty white square with a grey border. When I modify the code and run it in console in Chrome, data ends up being a string of jumbled up characters which I presume are the raw image data.

I have been searching for several days now, including on SO, and I have yet to find a solution which does what I need. On the contrary, I have found solutions which simply put the url into the image source using jQuery attr() which isn't what I need.

If anyone can provide any kind of solution to fix this code, or even perhaps a different and more efficient method of getting all the images, I am open to anything.

imageArray: http://pastebin.com/03tvpNey

Regards, Emanuel

dsfdsfds521521
dsfdsfds521521 谢谢你的插件。我已经检查了它看起来很有希望,但下面的用户有一个更好的想法,即将图像缩小为缩略图以节省加载时间。谢谢你的帮助!
接近 5 年之前 回复
duandeng2011
duandeng2011 请检查我在评论中提到的插件。您尝试的方式不会工作,因为响应将是原始图像数据
接近 5 年之前 回复
douji5746
douji5746 我的想法是我需要它们同时加载所有内容以减少加载时间。以前我只是直接在<img>标签中使用它们,但它完全加载需要将近20秒。
接近 5 年之前 回复
doz22551
doz22551 从链接给出我看到你已经拥有所有图像然后为什么再次打电话,只需使用相对路径与图像名称来显示。
接近 5 年之前 回复
dtdr84101
dtdr84101 看到这个帖子:stackoverflow.com/questions/18480550/...
接近 5 年之前 回复
duandu1377
duandu1377 是的,没有子文件夹。一切都在同一个目录中。
接近 5 年之前 回复
doumeikuan6834
doumeikuan6834 那么你在编写ajax代码的同一位置有所有图像吗?
接近 5 年之前 回复
dpi9530
dpi9530 我确实将它发布在pastebin链接中。这是它:pastebin.com/03tvpNey
接近 5 年之前 回复
dongqia3502
dongqia3502 请在此处发布您返回的数组。有些人在这里感到困惑。
接近 5 年之前 回复
dougou1943
dougou1943 是的我使用$(function(){//codehere})在加载时执行此操作;
接近 5 年之前 回复
doufang7385
doufang7385 好吧,我正在做一些测试中的console.log(数据),如果你进一步阅读,我提到它是一堆乱七八糟的字符,我认为是原始图像数据。
接近 5 年之前 回复
dongsuiwo0279
dongsuiwo0279 添加警报(数据);成功并检查你得到了什么。
接近 5 年之前 回复
duanne9313
duanne9313 如果你的id类似1,2,3然后将它们更改为id1,id2或类似的东西。然后它应该工作。
接近 5 年之前 回复
dou8mwz5079
dou8mwz5079 你可以尝试这个插件jquery.eisbehr.de/lazy
接近 5 年之前 回复
du9698
du9698 所以你在加载这个ajax调用吗?
接近 5 年之前 回复
douou1891
douou1891 图像数组返回图像的相对URL,即.jpg。截至目前,我已更新我的代码以包含正确的类型。图像数组如下所示:pastebin.com/03tvpNey
接近 5 年之前 回复
duanchi0883649
duanchi0883649 你的图像数组返回什么?和dataType应该是image/jpg
接近 5 年之前 回复

3个回答



如果您正在使用Base64图像数据(您提到的混乱字符串),您需要获取 img src </ code>类似于:</ p>

 &lt; img src =“data:image / png; base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4 // 8 / w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg ==”alt =  “红点”/&gt; 
</ code> </ pre>

所以你的代码应该是:</ p>

  var imageArray =&lt;?  php if(!empty($ images)){echo'[“'。implode('”,“',$ images)。'”]';} else {echo“false”;}?&gt ;; 
console。 log(imageArray);
console.log(imageArray.length);
for(i = 0; i&lt; imageArray.length; i ++){
$ .ajax({
type:'GET',
url :imageArray [i],
dataType:'image / jpg',
async:true,
success:function(data){
$(“#”+ i).attr(“src”,'data :image / png; base64,'+ data);
}
});
}
</ code> </ pre>

然而</ strong> .. 如果通过AJAX和usin加载图像,我会感到非常惊讶 g Base64内容比使用普通的&lt; img src =“path”/&gt; </ code>方法更快。</ p>

AJAX的目的是获取一些内容 加载DOM后的数据。 所有现代浏览器已经异步获取图像。 我怀疑你会看到任何性能上的提升。 </ p>

我建议更可能的问题是你的25张图片......我想这些图片显示为缩略图......仍然是大型高分辨率图片。 您应该保存较小的“缩略图”版本,然后在/用户点击缩略图时查看高分辨率图像以查看完整尺寸的图像。</ p>

注意 </ strong>元素ID 可以</ em>以(或是)数字开头。 这在HTML4中无效,但在HTML5中完全没问题。 但是,你可能在使用CSS规则时遇到问题 - 所以你最好用字母前缀(即i1,i2,i3 ......)。</ p>
</ div>

展开原文

原文

If you're using Base64 image data (the string of jumbled characters you mentioned), you'll need to get your img src to be something like:

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Red dot" />

So your code should be:

var imageArray = <?php if (!empty($images)) {echo '["' . implode('", "', $images) . '"]';} else {echo "false";} ?>;
console.log(imageArray);
console.log(imageArray.length);
for (i = 0; i < imageArray.length; i++) {
$.ajax({
    type: 'GET',
    url: imageArray[i],
    dataType: 'image/jpg',
    async: true,
    success: function (data) {
        $("#" + i).attr("src", 'data:image/png;base64,'+data);
    }
});
}

However... I'd be very surprised if loading the images over AJAX and using the Base64 content is any quicker than using a normal <img src="path"/> approach.

The point of AJAX is to fetch some data after the DOM is loaded. All moderns browsers will already fetch images asynchronously. I doubt you'll see any performance gain whatsoever.

I'd suggest the more likely problem is that your 25 images... which I suppose are displayed as thumbnails... are still large, hi-res images. You should save a smaller 'thumbnail' version, and then fetch the hi-res image when/if the user clicks on the thumbnail to view the full-size one.

Note that an element ID can start with (or be) a number. This wasn't valid in HTML4, but is perfectly fine in HTML5. However, you might have trouble with CSS rules - so you'd be better off prefixing with a letter (i.e. i1,i2,i3...).

dtkp51520
dtkp51520 谢谢你的帮助。 即使从缓慢的iPad wifi,我也完美地工作了。 我设法将1.4 GB的文件减少到10mb的文件! 我真的不能够感谢你!
接近 5 年之前 回复
doushenmao9036
doushenmao9036 我的意思是成本,机器上的资源成本。 :)。 Imageik很好,它们都建立在GD之上,这是你发现imagescale的地方 - 所以,是的。 :)。 不用担心 - 祝你好运!
接近 5 年之前 回复
dsqe46004
dsqe46004 好吧,由于我主持自己的东西,成本并不是真正的因素。 使用php将所有文件调整为缩略图的最佳方法是什么? 我应该使用某种php插件,比如imagik吗? 编辑:我发现了这个。 php.net/manual/en/function.imagescale.php。 感谢Dave的帮助!
接近 5 年之前 回复
dongwei9365
dongwei9365 谢谢@Emanuel。 至于实现这个的最佳方式 - 有一些。 如何上传图片? 您可以使用PHP来调整它们的大小,并保留1x缩略图和1x原始(高分辨率)。 或者,你可以有一个页面 - thumbnail.php,它将图像URL作为查询字符串参数,然后使用GD返回它的大小 - 就像这篇文章。 (我会说保留2份副本 - 处理器密集程度较低。处理=昂贵,磁盘空间=便宜!)
接近 5 年之前 回复
dqxhit3376
dqxhit3376 我会打电话给你的建议,在这里使用缩略图作为我的答案。 它绝对有帮助! 非常感谢戴夫!
接近 5 年之前 回复
douguluan5102
douguluan5102 现在,你认为我应该使用缩略图是一个好主意。 你知道有效地为300多张照片做到这一点的好方法吗?
接近 5 年之前 回复
du532861657
du532861657 不,它不是base64。 “随机杂乱的字符”是指奇数符号和一些显示图片格式,日期,颜色类型等的字母。
接近 5 年之前 回复



将您的ID更改为 id1,id2 </ code>或来自 1,2 </ code>的类似内容 并成功使用:</ p>

  $(“#id”+ i).attr(“src”,data); 
</ code> </ pre> \ n

了解id为何不应从数字开始: HTML中id属性的有效值是什么? </ p>
</ div>

展开原文

原文

Change your ids to id1,id2 or something similar from 1,2 and in success use this:

            $("#id" + i).attr("src", data);

see why id should not start from a number:What are valid values for the id attribute in HTML?

doufulian4076
doufulian4076 数据变量包含我假设的原始图像数据。 我收集了这个,因为它是许多混乱的符号和字母。
接近 5 年之前 回复
doumanju2533
doumanju2533 data.is中的值是什么,它是直到图像或其他东西的路径
接近 5 年之前 回复
doume5227
doume5227 我不确定你在这里问什么。 你能不能更清楚地试一试措辞?
接近 5 年之前 回复
doucheng1944
doucheng1944 你是否获得了成功的图像路径。检查是否显示图像是否显示图像。如果路径不完整。
接近 5 年之前 回复
dongli2000
dongli2000 我的问题不在于获取图像的路径。 这很好用。 我的问题是在需要花费大量时间的时候及时加载图像。
接近 5 年之前 回复
duan4369
duan4369 为什么不进行单个ajax调用以获取所有图像路径然后将它们拆分成功并使用for循环分配它们。
接近 5 年之前 回复
drnx3715
drnx3715 嘿,我尝试了你的建议,我把id设为id0,id1,id2等,它仍然显示空白。 我注意到当我检查图片上的元素时,它没有在src属性中显示任何内容。
接近 5 年之前 回复



我之前遇到过这个问题,我使用了这段代码:</ p>

  function loadImage(path,width,height,target){
var loaded = true;
$('&lt; img src =“'+ path +'”&gt;')。load(function(){
if(loaded){
$(this).css('maxWidth',width).css('maxHeight',height).appendTo(target);
loaded = false;
}
}); \ n}
</ code> </ pre>

UPDATE:</ p>

使用图像数组:</ p>

  [“20151107_140328.jpg”,“20151107_140329.jpg”,“20151107_141113.jpg”,“20151107_141114.jpg”,“20151107_141439.jpg”,“20151107_141447.jpg”,“20151107_141500.jpg”,“20151107_205509.jpg”,  “20151107_205512.jpg”,“20151107_213703.jpg”,“20151107_213708.jpg”,“20151107_213823.jpg”,“20151108_143256.jpg”,“20151108_143258.jpg”,“20151108_143320.jpg”,“20151108_143322.jpg”,“20151108_143339  .jpg“,”20151108_143340.jpg“,”20151108_143419.jpg“,”20151108_143422.jpg“,”20151108_143433.jpg“,”20151108_143435.j  pg“,”20151108_143443.jpg“,”20151108_143445.jpg“] 
</ code> </ pre>

您可以这样做:</ p>

  var image_array = [“20151107_140328.jpg”,“20151107_140329.jpg”,“20151107_141113.jpg”,“20151107_141114.jpg”,“20151107_141439.jpg”,“20151107_141447.jpg”,“20151107_141500.jpg”,“20151107_205509。  jpg“,”20151107_205512.jpg“,”20151107_213703.jpg“,”20151107_213708.jpg“,”20151107_213823.jpg“,”20151108_143256.jpg“,”20151108_143258.jpg“,”20151108_143320.jpg“,”20151108_143322.jpg“  ,“20151108_143339.jpg”,“20151108_143340.jpg”,“20151108_143419.jpg”,“20151108_143422.jpg”,“20151108_143433.jpg”,“20151108_143435.jpg”,“20151108_143443.jpg”,“20151108_143445.jpg”];  

for(var i = 0; 我&lt; image_array.length; i ++){
loadImage(image_array [i],&lt; width&gt;,&lt; height&gt;,&lt; container targeted&gt;);
}
</ code> </ pre>

和 在imageLoad函数中:</ p>

  function loadImage(path,width,height,target){
var loaded = true;
$('&lt; img src =“/ path / to / image /'+ path +'“&gt;')。load(function(){
if(loaded){
$(this).css('maxWidth',width).css('maxHeight ',height).appendTo(target);
loaded = false;
}
});
}
</ code> </ pre>
</ div>

展开原文

原文

I had an issue with this a while ago, I used this code:

function loadImage(path, width, height, target) {
    var loaded = true;
    $('<img src="' + path + '">').load(function () {
        if (loaded) {
            $(this).css('maxWidth', width).css('maxHeight', height).appendTo(target);
            loaded = false;
        }
    });
}

UPDATE:

using your images array:

["20151107_140328.jpg", "20151107_140329.jpg", "20151107_141113.jpg", "20151107_141114.jpg", "20151107_141439.jpg", "20151107_141447.jpg", "20151107_141500.jpg", "20151107_205509.jpg", "20151107_205512.jpg", "20151107_213703.jpg", "20151107_213708.jpg", "20151107_213823.jpg", "20151108_143256.jpg", "20151108_143258.jpg", "20151108_143320.jpg", "20151108_143322.jpg", "20151108_143339.jpg", "20151108_143340.jpg", "20151108_143419.jpg", "20151108_143422.jpg", "20151108_143433.jpg", "20151108_143435.jpg", "20151108_143443.jpg", "20151108_143445.jpg"]

You can do this:

var image_array = ["20151107_140328.jpg", "20151107_140329.jpg", "20151107_141113.jpg", "20151107_141114.jpg", "20151107_141439.jpg", "20151107_141447.jpg", "20151107_141500.jpg", "20151107_205509.jpg", "20151107_205512.jpg", "20151107_213703.jpg", "20151107_213708.jpg", "20151107_213823.jpg", "20151108_143256.jpg", "20151108_143258.jpg", "20151108_143320.jpg", "20151108_143322.jpg", "20151108_143339.jpg", "20151108_143340.jpg", "20151108_143419.jpg", "20151108_143422.jpg", "20151108_143433.jpg", "20151108_143435.jpg", "20151108_143443.jpg", "20151108_143445.jpg"];

for(var i = 0; i < image_array.length; i++) {
    loadImage(image_array[i], <width>, <height>, <container targeted>);
}

and in the imageLoad function:

function loadImage(path, width, height, target) {
    var loaded = true;
    $('<img src="/path/to/image/' + path + '">').load(function () {
        if (loaded) {
            $(this).css('maxWidth', width).css('maxHeight', height).appendTo(target);
            loaded = false;
        }
    });
}

douren5490
douren5490 它使用持有div
接近 5 年之前 回复
dshun123456
dshun123456 那么你的这个代码,loadImage()函数,是否使用<img>标签作为其“目标”,还是使用像div这样的其他东西?
接近 5 年之前 回复
doumi7854
doumi7854 检查我的编辑
接近 5 年之前 回复
dongshuxi3105
dongshuxi3105 在链接中使用for循环遍历所需的所有图像,并在for内调用loadImage函数
接近 5 年之前 回复
duancuo1234
duancuo1234 所以,如果我在我的浏览中读取正确,这里的代码会在标签中加载一个图像,然后将其附加到您选择的目标上? 这不是我正在寻找的,因为这段代码不会尝试一次加载多个。
接近 5 年之前 回复
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问
相关内容推荐