Jquery图片加载函数

发布于 2024-10-16 17:17:42 字数 2387 浏览 1 评论 0原文

// Called when image is dropped in canvas
function dropResource() {

    var imgIndex = getImageIndexByID(currentDragImageID);
    var newImgID = resourceData.length;
    var newImage;

    newImage = $('<div id="imgD' + newImgID + '" style="display:inline-block;position:absolute;"><img alt="Big" id="imgA' + newImgID + '"  src="' + uploadFolder + '/' + imgData[imgIndex][1] + '" /></div>');
    $('#thePage').append(newImage);

    $('imgA' + newImgID).load(function() {

        // Get properties
        var imgW = $('#imgA' + newImgID).width();           // Native width store this
        var imgH = $('#imgA' + newImgID).height();          // Native
        var imgX = $('#imgA' + newImgID).position().left;   // Relative, scale back 
        var imgY = $('#imgA' + newImgID).position().top;
        var zindex = getBiggestZindex() + 1;

        // Resize native dimensions to fit current scale
        $('#imgA' + newImgID).width(Math.round(imgW * currentScale));
        $('#imgA' + newImgID).height(Math.round(imgH * currentScale));
        $('#imgA' + newImgID).css("z-index", zindex);

        // Add to array (dbID, imgarrIndex, width, height, x, y)
        resourceData[newImgID] = new Array(0, imgIndex, imgW, imgH, imgX, imgY, zindex);

        // Make img wrapper draggable
        makeResourceDrag(newImgID);

        // Save this as a resource
        $.ajax({
            url: 'artworkAjaxHandler.ashx?type=addResource&uploadID=' + currentDragImageID + '&page=' + currentPage + '&w=' + imgW + '&h=' + imgH + '&x=' + imgX + '&y=' + imgY + '&z=' + zindex,
            success: function(data) {
                var splitData = data.toString().split("|");

                // Success
                if (splitData[0] == "1") {

                } else {
                    $.fancybox.close();
                    $.jGrowl("<strong>Error during image drop! Try reloading page.</strong><br />" + splitData[1], { sticky: true });
                }
            },
            error: function() {
                $.jGrowl("<strong>Error</strong><br />There was an error when processing the Ajax request", { sticky: true });
            }
        });
    });

加载函数永远不会调用...我知道我可能执行不正确,但是一旦图像加载完成,它就会自动调整其包装器的大小然后我需要抓取尺寸。

有人可以帮忙吗?

// Called when image is dropped in canvas
function dropResource() {

    var imgIndex = getImageIndexByID(currentDragImageID);
    var newImgID = resourceData.length;
    var newImage;

    newImage = $('<div id="imgD' + newImgID + '" style="display:inline-block;position:absolute;"><img alt="Big" id="imgA' + newImgID + '"  src="' + uploadFolder + '/' + imgData[imgIndex][1] + '" /></div>');
    $('#thePage').append(newImage);

    $('imgA' + newImgID).load(function() {

        // Get properties
        var imgW = $('#imgA' + newImgID).width();           // Native width store this
        var imgH = $('#imgA' + newImgID).height();          // Native
        var imgX = $('#imgA' + newImgID).position().left;   // Relative, scale back 
        var imgY = $('#imgA' + newImgID).position().top;
        var zindex = getBiggestZindex() + 1;

        // Resize native dimensions to fit current scale
        $('#imgA' + newImgID).width(Math.round(imgW * currentScale));
        $('#imgA' + newImgID).height(Math.round(imgH * currentScale));
        $('#imgA' + newImgID).css("z-index", zindex);

        // Add to array (dbID, imgarrIndex, width, height, x, y)
        resourceData[newImgID] = new Array(0, imgIndex, imgW, imgH, imgX, imgY, zindex);

        // Make img wrapper draggable
        makeResourceDrag(newImgID);

        // Save this as a resource
        $.ajax({
            url: 'artworkAjaxHandler.ashx?type=addResource&uploadID=' + currentDragImageID + '&page=' + currentPage + '&w=' + imgW + '&h=' + imgH + '&x=' + imgX + '&y=' + imgY + '&z=' + zindex,
            success: function(data) {
                var splitData = data.toString().split("|");

                // Success
                if (splitData[0] == "1") {

                } else {
                    $.fancybox.close();
                    $.jGrowl("<strong>Error during image drop! Try reloading page.</strong><br />" + splitData[1], { sticky: true });
                }
            },
            error: function() {
                $.jGrowl("<strong>Error</strong><br />There was an error when processing the Ajax request", { sticky: true });
            }
        });
    });

The load function is never calling... I know i'm probably executing this improperly, but once the image has finished loading it resizes it's wrapper automatically then I need to grab the dimensions.

Can anyone help?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

顾忌 2024-10-23 17:17:42

您缺少哈希:

 $('imgA' + newImgID).load(function() 

应该

 $('#imgA' + newImgID).load(function() 

You are missing a hash:

 $('imgA' + newImgID).load(function() 

should be

 $('#imgA' + newImgID).load(function() 
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文